<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/AVvXsEgfpfwSXDDj1nSzUFjNfVgIbRG0on9725h3ORYJaZFFZ3cfYSWfaWt6Qpp0SXuAka2VMtOKtz2zygo6xqPOM5vMMBIrwPxIpL0dRk3U3dCjXJ0gojKQXAHrH-Xxdywl2P69YVLlIyhgH1M/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/AVvXsEjG-FwOeI1rCsPrWGgWqe-T3yp4I7XeGQmUlVWO244L4MqqakJ5z5YD8hJzb276Yre4iP7uOWYUx0avsRwHoBkLUqtnc4sWc_KSUkf9UhAhg69t_XFD0pEGHfJYHwWtDODBIjEdPgQ_vao/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTMFXFski5thaBWg8tORsOOr_d7V-2CoOT177C4xdDwXKDW3_qjBa3OJ-Rnp15O2yT-OCU8OFsSYld0EsZmgV6mByFO0zdj7RxzUa04ivCbKtLy3jI8QUt4SgVEtMko_7iuGSvcbgcSBs/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/AVvXsEhZL_UsBlvxdatHVF4N441Mu-BwM_q1mgymWq9yvTzR04ZD9rnBfbPjppIx1zOXpadWJfFSYBpgyAbnCxk6khlJf1yo5tlNsXrBnOAPoKmiTbLPZueYZX5_Rcdl1CvD2s7HjXXPjtLwf7M/s1600/defaultimage.jpg'/>
</b:if>
</a>
</b:if>
</li>
</b:loop>
</ul>
</div>
</div>
</b:if>
</b:includable>
</b:widget>