Add Multi-Colored Popular Posts to Blogger |

Add Multi-Colored Popular Posts to Blogger

Popular Posts Widget is a widget provided by Blogger, showing the most viewed posts on the blog in t…

http://www.alychitech.com/2012/03/add-multi-colored-popular-posts-to.html

Popular Posts Widget is a widget provided by Blogger, showing the most viewed posts on the blog in the last 7 days, last month or of all time. It also has three displaying modes: display title only, display title with image thumbnail or display title along with the posts snippets.To customize the popular posts widget, we must add a new variable and some css codes to our blogger template.How to add multi-colored popular posts to BloggerStep 1. Login to your , go to Design >> Edit HTML >> check “expand widget templates” (make a backup first) and search for the following tag:/* Variable definitions ====================Step 2. Copy and paste just below/after this tag, the next code:Step 3: Search for the following piece of code:]]>Step 4. 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 .-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 5. Now find the following code:Step 6. Delete it until you reach at this tag (delete this also):Note: