Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How To Add Multi-Colored Popular Post Widget In Blogger

How To Add Multi-Colored Popular Post Widget In Blogger

Popular post widgets are a great way to easily make your blog readers navigate your Popular Posts. But, the default Blogger popular post widgets are no longer a trend and it looks dull.

So, here is a beautiful customizable and colored popular post that you can embed in your Blogger blog to make your blog more attractive and that catches your reader’s eye and ultimately increase your site engagement.
Just follow the simple steps below:

There are mainly three methods to display popular post on your blog.

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


3. Display post title with image thumbnail and
4. Display title with snippets.

In order to add these customizable multi-colored Popular Posts Widget, you have to add some new variables and CCS codes to your Blogger template. So, let’s get started:

Step 1. Login to your Blogger blog and click on Template and select Edit HTML.


How To Add Multi-Colored Popular Post Widget In Blogger

Step 2. Click anywhere inside the HTML scripts area and search by pressing Control + F together and type the following text.
 Variable definitions  

Note: If you cannot find the above text, past the below code in the search box.
  

......and this should end up with a similar line like below.
 ----------------------------------------------- */  

Step 4. Copy the below code and past just after this tag next to the code.

 









Step 5. So, you have added the variables that made you change the colors and now search for the below tag.
 ]]>  

Step 6. Copy and paste the below code just above the above 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. Search for the below code.
 

Step 8. Delete it until you see the below tag (delete the 
tag as well)

   


Note: Be very careful when removing it and thus the entire fragment of the code should look like below.
 






Step 9. After deleting the above code, paste the following in its place.
 








Step 10. Click on Save to save your template.

Multi-colored popular posts widget settings

Go to Layout and click the Edit link on the popular posts widget.

Select to display up to 5 posts and save your popular posts widget.

You can easily change the background color of your popular posts widget by going to Template and then clicking on Customize button and go to your Advanced tab.

Where you will find the Popularpostbackground title from where you can select any color as your desire or that best suits your blog theme color.

If you have successfully implemented the multi-colored popular post widget for your Blogger blog and enjoy reading my blog post, then please subscribe for more tutorial or for any questions or suggestions, leave a comment below.




This post first appeared on Wonder Krish, please read the originial post: here

Share the post

How To Add Multi-Colored Popular Post Widget In Blogger

×

Subscribe to Wonder Krish

Get updates delivered right to your inbox!

Thank you for your subscription

×