Add a Popular Posts Gallery Just Above Your Blogger Posts

The most strong and popular web design trend over last couple of years is a sliding horizontal panels also known as Sliders or Carousels. It's a very effective method to increase the web site usability and engage the user. This widget shows the most popular 10 posts on your blog just above your Blogger posts. You can see the Demo on my blog.

☻ HOW TO ADD POPULAR POSTS GALLERY JUST ABOVE YOUR BLOGGER POSTS

1) Go to  Blogger Dashboard (DropDown Menu)  -->  Template  -->  Edit HTML  -->  Proceed
2) Backup your  Template  before making any changes to your blog
3) Now Expand Widget Templates
4) Find the code shown below using  [ctrl+F] or F3.

]]></b:skin>

5)  Replace  the above code with the code shown below.

#gallery{position:relative;margin:0 35px 20px;width: 590 px;height: 126 px;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://lh6.googleusercontent.com/-kOeYJeuoeOQ/UVk170JpNkI/AAAAAAAACqE/8GmPaUyfZBo/h120/Tips+N+Track.gif) 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}

]]></b:skin>

Note : you can adjust the size of gallery, changing the values in pink ( 590 and 126 ).

6) Find the code shown below using  [ctrl+F] or F3.

</head>

7)  Replace  the above code with the code shown below.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' 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: ["https://lh6.googleusercontent.com/-hfmGwgVsnuk/UVk2P1NtVOI/AAAAAAAACqM/5aJcsXc9pbE/h120/Tips+N+Track.gif", -40, 36], rightnav: ["https://lh4.googleusercontent.com/-9FV53lAw6ms/UVk2XHHy9OI/AAAAAAAACqU/M0Jy4mlIwIk/h120/Tips+N+Track.gif", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>

</head>

8) Find the code shown below using  [ctrl+F] or F3.

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

9) Copy the code shown below and paste it  after/below .

<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://lh5.googleusercontent.com/-Ao5V5usFbtg/UVk3pRHSVAI/AAAAAAAACqg/jAgnq0zBluw/h120/Tips+N+Track.gif'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div></div></b:if>
 </b:includable>
</b:widget>

Note: If you find more than 1 appearance of   <b:section class='main' id='main' showaddelement='no'>   tag, add the  below  peace of code just above the  first appearance  of it.

   

10)   Click save Template and preview your blog.

☻ ENJOY.......