Slider şeklinde popüler yayınlar eklentisi

Slider şeklinde popüler yayınlar eklentisi

Yeni bir eklentiyi daha sizlerle paylaşıyorum. Popüler yayınlar eklentisi genellikle sidebarlarda kullanılıyordu ama yeni olan bu eklenti sayesinde, popüler yayınlarınızı istediğiniz bir yerde paylaşabileceksiniz. Bu eklenti sayesinde bloğunuz diğer bloglardan daha faklı bir görünüme sahip olacak. Alttaki kodu </head> kodunun hemen üzerine ekleyin.

<style type="text/css">

#gallery{position:relative;margin:0 35px 20px;width:500px;height:126px;background:#ffffff}

#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}

#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDk-IcZaSHM3xg9O6NfUL8IY0YIVum5V3-k1xWmcPqFKQvLuDDWjWTsDtEWg4sBFP42S11cdnoBetcnKymoj3xm-ZiA0cOmw-WmwCoPf9G6QWq9cw6vI7IH24UoGVZPLXzVjOMXBs0r7E/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}

#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}

#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}

</style>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script src='https://sites.google.com/site/gehadhussien/popular-posts.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

stepcarousel.setup({

galleryid: "gallery",

beltclass: "belt",

panelclass: "panel",

autostep: {enable:true, moveby:1, pause:3000},

panelbehavior: {speed:500, wraparound:true, persist:true},

defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl60VwXpB7Vao6_i-kx1Kq0b72IVYDD1y-gBM-lsUoqcZAGPQ-r8LIZzH7a13J1JkAcyeVgw0dLM7TQAeAs6hfGOjY5dVOS_QL9G9KXo-0Mlr5V7pkLdiOoU40No5tilsmeRtcWdahKlQ/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_JLHXB0wXbhr3C-Xeu7UQXlzVQzgYV0cUOpk6O4n-VFwMxatCH2-WG-l5NAT0UA_EtQRjkdESbZGUs9aVuzu-fyUgNWuXdUVfFtRSxYacsM1cY6yvqf7-r7Yp72FErTdPUIMDymtN0PY/s1600/next.png", 2, 36]},

contenttype: ["external"]

})

//]]>

</script>

Daha sonra alttaki kodu bulun. Bulamazsanız kodun bir kısmını aratın.

<b:section class='main' id='main' showaddelement='no'>

Alttaki koduda bulduğunuz kodun altına ekleyin. Not: Alttaki kodu isterseniz kendi istediğiniz bir yerede ekleyebilirsiniz.

<b:widget id='PopularPosts7' locked='false' title='Popular Posts' type='PopularPosts'>

<b:includable id='main'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>

<div id='gallery'>

<ul class='belt'>

<b:loop values='data:posts' var='post'>

<li class='panel'>

<b:if cond='data:showThumbnails == "false"'>

<b:if cond='data:showSnippets == "false"'>

<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>

<b:else/>

<div class='item-title'>

<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>

</div>

<div class='item-snippet'>

<data:post.snippet/>

</div>

</b:if>

<b:else/>

<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>

<b:if cond='data:post.thumbnail'>

<img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>

<b:else/>

<img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi17smC9nFKTGjROB9kbE9nt1rzmGXL6eWAggxe6iGx7aBiMijCu9-uNDGf2brMp_2NMCz1jofBqnvnC325WL9xvnbNpRDgLIeSneQ9IBk-QBubDphlN-g5xlye-8StfvoffFoyz02oTSg/s1600/defaultimage.jpg'/>