Add A Auto Slider Gallery Just Above Your Blogger Blog Posts

After published "Slide Out Social Bookmarking Gadget With JQuery" and "Slide Out Floating Sharing Buttons For Blogger Blog",now, I will show you "How to Add A Auto Slider (Popular Posts) Gallery Just Above Your Blogger Blog Posts.It's a very effective way to increase the blog usability and engage the readers.

This widget shows the most popular 10 posts with auto slider on your blog just above your Blogger posts. You can see the image below as a Demo:

Read Also: Blogger Dynamic View For Mobile Device

Before adding this widget I want to tell you that it is not fully compatible with all blogger templates, so I suggest you make a backup before making any changes to your blogger template.let's start the tutorial now:

For Old Blogger Interface:

• Go to Dashboard - Design - Edit HTML - (Make a Backup) > Expand Widget Template

For New Blogger Interface:

• Go to Dashboard - Template - Edit HTML - Proceed - (Make a Backup) > Expand Widget Template
• Now, Press (CTRL + F) & Search Given Code

]]></b:skin>

• Just Above/Before It, Add The Following Code

#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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRo2uEt_gIye0fl4NyaH7C8s3BA-T7dzjx2RukxH5mI-vJ9HtYl3gcK2dRV0RpHfW7VqG1rpKVq-6bc7-0ZeJJsXJbw0WG5ogLMNbNpJGj4DeKjFSN58sZ-rFz9WW1qDWzFL1zFFzdAEVq/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}

Remember Notes: You can adjust the size of gallery, changing the values in Yellow (590 and 126). 

• Now Search Following Code

</head>

• Just Above/Before It, Add Below Code

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://blogsdaddy.googlecode.com/files/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: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH48BmNkRibWY_fPIdKUrWCFOyOm93HJsEC_hwDhkTzhVMnFbVhsrm3jTYA73u3Paw14rCmE7NPA2fMCZAVdDljrzpmTfUV7PcQPSl0o86QvK-PpXYbG32QZMHYDCVG87zp6KQYwShyphenhyphenJCC/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif-Y2bXLJWLdXbauTE2GL4dnTE5uXbieKTykfVKlifulAqTso2zUWfefEjsgLQlQk1QxBuC83qKJY6w_ApAz95bB9a-_6GnMdukUxMfZUZC7JAQIpdpgNfB6s9lda2Vq9pQsv6h2DyrJa0/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>

• In Your Template, Search Below Code

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

• If you can't find it then search this 

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

or

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

• Just Below/After It, Add The Following Piece Of Code

<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6E8gg30uU2PDiu_ishz8JdtsvGUBgGEG5wGrVCl-yEB-Q3SkmcBc4T48EuBRncimVlzV86-KnoODp3xgEa42vM3N-RNQQ0mwMzdayhVytVHHDLlzj3olpRg9PP7V0oG6XgAd9IK_eohph/s1600/no-image.PNG'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div></div></b:if>
 </b:includable>
</b:widget>

• It's All Done, Save Your Template and Visit It. 
• This Widget Will Not Show On Your Posts/Pages.If You Want to Display Then Remove The Fragments Of Code In Yellow.

If you need my help then just leave your comment below.Stay blessed... Happy Blogging :)

Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.