Add Multi-Colored Popular Posts to Blogger

Popular Posts is a widget provided by Blogger that displays the most visited posts on the blog from the last 7 days, last month or all time. There are three ways to display it:

1. Display only post title
2. Display title with image thumbnails and snippets
3. Display post title with image thumbnail
4. Display title with snippets.

To customize this multi-colored popular posts widget, we have to add new variables and some CSS codes to our Blogger template. So let's begin adding it...

How to add multi-colored popular posts to Blogger

Step 1. Login to your Blogger Dashboard, go to "Template" and hit the "Edit HTML" button.

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the editor' search box.

Step 3. Search for the following text:

Variable definitions

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

 
...and should end up with a similar line:

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

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

Step 5. Now that we added the variables to allow us changing the colors, search for the following tag:

]]>

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 see this tag (delete the tag as well):

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. To save the widget, click the 'Save template' button.

Multi-colored Popular Posts Settings

- Go back to Layout and click the "edit" link on the 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 by going to "Template", click the Customize" button and go to the "Advanced" tab. There you should find the "PopularPostsBackground" title from where you can select any color you want.

You're done!

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