Join the list of our 279,000+ subscribers

Note: Backup your Blogger Template before making any changes

How to Simple Sliding Popular Posts Widget for Blogger

• Go to Blogger “Dashboard” 
• Then click the “Template” found at the sidebar
• And now hit “Edit HTML”
• Now search for this code ]]></b:skin>
• For searching use Ctrl+F to find the code.
• After finding it copy & paste the below code just above/before ]]></b:skin>. 

#gallery {    position: relative;
    margin: 0 35px 20px;
    width: 590px;
    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://s23.postimg.org/cgryfolqv/PP_Galllery_Slider_Lab_Strike.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;
}

• Then again search for </head> tag.
• Once you searched it copy & paste the below code just above/before  </head>  tag.

<script src=” type=’text/javascript’/>
<script src=’http://helplogger.googlecode.com/svn/trunk/auto-slider.js’
type=’text/javascript’/>
<script type=’text/javascript’>
//<![CDATA[
stepcarousel.setup( {
    galleryid: “gallery”,
beltclass: “belt”,
panelclass: “panel”,
autostep: {enable:true, moveby:1, pause:6000;
},
panelbehavior: {
    speed: 500, wraparound:true, persist:true;
},
defaultbuttons: {
    enable: true, moveby: 2,
leftnav: [“http://i48.tinypic.com/rmu550.png”, -40, 36],
rightnav: [“http://i50.tinypic.com/161l1n9.png”, 2, 36];
},
contenttype: [“external”];
})//]]>
</script>

• You’re not yet finished ! Here is the last step to add your widget in your blog. 
• Now again search for <b:section class=’main’ id=’main’ showaddelement=’yes’> Or <b:section class=’main’ id=’main’ showaddelement=’no’> 
• Once you finished searching it then copy and paste the code given bellow right below the <b:section class=’main’ id=’main’ showaddelement=’yes’> Or <b:section class=’main’ id=’main’ showaddelement=’no’> .

<b:widget id=’PopularPosts2′ 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 == &quot;false&quot;’>
<b:if cond=’data:showSnippets == &quot;false&quot;’>
<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=’http://s24.postimg.org/hhzch1t7l/blank_image.png’/>
</b:if>
</a>
</b:if>
</li>
</b:loop>
</ul>
</div></div>
</b:if>
</b:includable>
</b:widget>

• Now save your template. That’s it !

If you have still any doubt about installing this widget in your blog then feel free to share it in comments. I’ll surely help you. Happy Blogging !