Add a Popular Posts Gallery just above your Blogger posts

The most popular web design trend over last couple of years are horizontal sliding panels, also known as sliders or carousels. One of the effective ways to increase the site usability and engage the user is to add a popular posts gallery above Blogger posts to display the most viewed 10 posts on your blog.

To see it live, please visit the demo blog below.

Demo blog

Adding Popular Posts Gallery Above Blogger Posts

Before adding the Popular posts widget as gallery in Blogger, please note that this widget is not fully compatible with all templates, so it's recommended to make a backup before making any changes in your Blogger template.

Now, follow these steps:

1. Go to Dashboard, click "Template" > hit the "Edit HTML" button and click anywhere inside the code area > press the CTRL + F keys to open the Blogger search box.

2. Type or paste this tag inside the search box:

]]>

Note: you may have to click the arrow next to it, then try to find ]]> again.

3. Just above/before it, add the following CSS:

#gallery{position:relative;margin:0 0 20px;height:126px;}
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:0px 10px 20px 0;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRcOnW8CXWMvkz-LBMNwmUI1o1sBy2DgBydoTVs3p7D1Q083HNdFjekDVWN7A8OxvMmZtbpn3ZYYrJiwc3hNFCYzzbM9rAseGKl1WdNTOqls9IfCdXAyfJlSduEj69YX_5bx5lUXuKJYpc/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}
#gallery .panel img{border:1px solid #DDD;margin:7px 6px 6px;width:72px;height:72px;background:#FFF;padding:0px}

Note: change the value in red (126px) to adjust the gallery height.

4. Now search the following tag:

5. Just above/before it, add the script for the Popular Posts gallery and jQuery:

Now that we added the scripts to make our gallery work, let's add the HTML of the Popular Posts widget above the Blogger posts.

6. Search this line:

Note: If you can't find it, search this one:

7. Just below it, add the following code:

 

  

   
    
• 
       
        
         
        
         
  
          
         
  
         
  
          
         
  
        
       
        
         
          
         
          
         
        
       
      

   
  

 

 

Note: Delete the lines in blue if you want this widget to be displayed in posts pages, as well.

8. Preview your template and if everything is OK, press the 'Save Template'.  Now you're done adding the Popular Posts Gallery! Just view your blog and see it live above the Blogger posts.