How To Add Multi-Colored Popular Posts Widget in Blogger

Today I am going to show you how you can add Multi-Colored popular posts widget in your blogger blog.Popular posts widget is a widget that shows the visitor the most viewed post on your blog this is also available in blogger widget store but is too simple but this popular post widget is attractive and Colored.This also consists of post snippets.
Multi-Colored popular post widget is built in we have to change some variables in CSS section of blogger

Step By Step Guide:

Adding Multi-Colored Popular Posts Widget in Blogger Blog

Step 1: Go to Blogger Dashboard.

Step 2: Go to Template > Edit HTML.

Step 3: Now you will see the HTML section of your blogger blog and press Ctrl + F to open the HTML Search box.

Step 4: Now paste the following phrase in the Search box and hit Enter.

/* Variable definitions

if you don't find the above phrase this is normal enter the below phrase and hit enter

this will end with the following phrase
----------------------------------------------- */
Step 5: Now copy the below code and paste after the above code.

Step 6: Now Search the following code.
]]>
Step 7: Now add the below code above the upper phrase that is mentioned in Step 6.
#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:92%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:82%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:77%}
#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:72%}
#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 8: Now find the following code by entering it into Search Box and hitting Enter.
Step 9: Now delete the above code including .

Step 10: Be careful while deleting the above code this is a compressed form of the code when you will hit the arrow in left you will see a complete code from top to the end this will end at and coplete code will look like this.

Step 11: Now replace the above code with the following code.

Step 12: Now Click on Save Template.
Step 13: Now go to Layout and set the post limit to 5 in the Configuration Of Popular Posts Widget shown in the figure below.
Step 14: Now for changing the background colors of the popular post widget Go to Template > Customize > Advanced > PopularPostsBackground and there are five different columns you can change any color that you want to be on the popular posts widget.
Dear Visitor please like our facebook fan page for keeping youself updated with our latest posts thanks.

by Jillur Rahman

Jillur Rahman is a Web designers. He enjoys to make blogger templates. He always try to make modern and 3D looking Templates. You can by his templates from Themeforest.

Follow him @ Twitter | Facebook | Google Plus

Tags: Без рубрики