Add Multi-Colored Popular Posts to Blogger

Popular Posts is a widget provided by Blogger that displays the most viewed posts on the blog in the last 7 days, last month and of all time. It has three displaying modes: display title only, display title with image thumbnail or display title along with the posts snippets.

To customize this popular posts widget, we have to add a new variable and some CSS codes to our blogger template. So let's begin:

How to add multi-colored popular posts to Blogger

Step 1. Login to your Blogger Dashboard, go to Design >> Edit HTML

Step 2. Select "Expand Widget Templates" (make a backup first)

Step 3. Search for the following tag:

/* Variable definitions
   ====================

Note: If you can't find it, paste it below the autor information that is usually below this tag (CTRL + F):

 

...and should end up with this symbol:
 

 ----------------------------------------------- */

Step 4. Copy and paste just below/after this tag, the next code:

Step 5. Search for the following piece of code:

]]>

Step 6. Just above/before it, add this code:

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

Step 7. Now find the following code:

Step 8. Delete it until you reach at this tag (delete the also):

Note: Be very careful when removing it. The entire fragment of code should look like this:

 

 

   

     
     
• 
         
           
             
             
           
             
             
  
             
  
           
         
           
             
             
  
               
                 

  
                   
                     
                   
                 

  
               
               

  
             
  
             
  
           
             
             

  
               
                 

  
                   
                     
                   
                 

  
               
               

  
               

  
             

  
             

  
           
         
       

     
   

   
 

Step 9. After you have deleted the above code, paste the following in its place:

  
   

  
  

   

    
     
• 
        
         
          
         
          
         
        
         
          
           
          
           
          
          
          
  
         
          
           
          
           
          
          
          

  
         
        
       

    
   

  

 

Step 10. Save template.

Settings

- Go back to Layout  and click on the edit link of Popular Posts widget.

Select to "display up to 5 posts", then Save the widget.

- You can easily change the background color of the popular posts widget, going to Template >> Customize  >> Advanced >> PopularPostsBackground and there you can select any color you want.

You're done!

If you are enjoying reading this blog, please like & subscribe for more tutorials.
For any questions or suggestions, leave a comment below.