Stylish Popular Posts Widget For Blogger

About The Widget

Recently I published a post regarding the stylizing of popular posts.You can find the article here in which I mentioned a awesome style of popular posts widget and in this tutorial I will show you another amazing popular posts widget designed by allbloggertricks.This widget is again made by help of simple css coding and this takes less loading time as compared to the previous tutorial.

Steps To Add It:-

• Go to Template tab of your blog's html
• Click on Edit HTML button
• Search for the following code:-

]]></b:skin>

• Add the following code above it 

.popular-posts ul li a { background: none repeat scroll 0 0 #222222; color: #FFFFFF; display: block; margin: 10px 0; padding: 25px 15px 30px; position: relative; text-decoration: none; transition: all 0.3s ease-out 0s; width: 85%; } .popular-posts ul li a:before { background: none repeat scroll 0 0 #2DB3E9; color: #FFFFFF; font-weight: 700; height: 2em; line-height: 2em; margin-left: 88%; padding: 4px; position: absolute; text-align: center; width: 2em; transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; } .popular-posts ul li a:hover { opacity: 0.8; } .popular-posts ul li a:hover:before { border-left-color: #CCCCCC; left: -1px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } .popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before { content: "10"; } .popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before { content: "9"; } .popular-posts ul li:first-child + li + li + li + li + li + li + li a:before { content: "8"; } .popular-posts ul li:first-child + li + li + li + li + li + li a:before { content: "7"; } .popular-posts ul li:first-child + li + li + li + li + li a:before { content: "6"; } .popular-posts ul li:first-child + li + li + li + li a:before { content: "5"; } .popular-posts ul li:first-child + li + li + li a:before { content: "4"; } .popular-posts ul li:first-child + li + li a:before { content: "3"; } .popular-posts ul li:first-child + li a:before { content: "2"; } .popular-posts ul li:first-child a:before { content: "1"; } .item-snippet { display: none; } .PopularPosts .item-thumbnail { display: none; }

What I Say About This Widget

This is the v2 of amazing popular posts widget and one advice that I would like to give with it is that you should display only 4 popular posts in the list without snipnet.