Numbered Popular Posts Widget for Blogger

Dhiraj Barnwal Wednesday, 7 August 2013 24 comments
Numbered Popular Posts
So I am back with yet another Popular Posts customization for blogger blogs. This one is quite special as it looks extremely elegant and has cool transition effects when hovered.

We can rarely see blogs which do not use Popular Posts widget. This widget decreases bounce rate and increase the pageviews of your blog. Making them attractive and eye-catching will make more people click on it hence making your blog more awesome and better.

I have already posted Popular Posts customization tutorials many a times. You can check them out below.




You can see a live working demo of this popular posts widget by clicking the button below.

Live Demo

After seeing the demo in order to add this widget to your blog follow the steps below.

Adding the widget in Layout


Firstly go to  Blog Title → Layout → Add Widget → Popular Posts. Add the widget in the desired location and save the template.

Adding the CSS in Edit HTML


 Now go to Blog Title → Template → Edit HTML. Press Ctrl + F and search for ]]></b:skin> in search box. After getting the code add the below given code just above ]]></b:skin>
.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;
} 

After adding the code save the template. Now you and your visitors can see this awesome numbered popular posts widget in your blogger blog.
Labels:
Google+ Pinterest

24 Comments to Numbered Popular Posts Widget for Blogger Post Yours! Read Comment Policy ▼

Such a nice and eye catching widget.

Regard's
http://www.skillblogger.com/

Amazing tutorial, I enjoy a lot. Will recommend to others

Such a nice and eye catching widget.

Regard's
http://www.blogsdaddy.com

http://4.bp.blogspot.com/-W29ed0g6HWQ/UgcHwsFUZWI/AAAAAAAAB8M/97lfn8FylDQ/s1600/www.SkillBlogger.com.png

http://4.bp.blogspot.com/-LdhvSf-ZsUw/UchzwMftH6I/AAAAAAAABnk/4gu9CHl1Dq4/s1600/All%2BBlogger%2BTricks.png

Hehe Bro !

hey. your animated page load feature is cool. could you teach us how to do the same with our blog too.

Thanks, your site has lot of nice widgets that other sites don't. Other sites have a lot of the same, boring widgets.

A very nice plugin i had found. I was searching for it. Thanks for sharing.

thanx for this grear widget. i will try it on my blog.

TANX I DID IT AND IT WORKS I ALSO DO TUTORIALS WWW.LBTUTORIALS.BLOGSPOT.COM

Thanks for nice post. but the top header(skyblue clr POPULAR POST ) not apear in my Blog.
plz help.

it's work so good :

http://estp-laayoun.blogspot.com/

Hey nice tutorial. See implementation on my blog: UI Design Hints

Muchas gracias seguĂ­ posteando

And Please Tell The Code For The Share Bar That Comes Below This Comment Box And The Toolbar That keeps Moving (home blog tutorials etc) That One Please It Would Be Great Help

Hello Dhiraj !!
Nice widget you have here !!!

Pretty cool, this blog rocks!

Cool widget but can you tell me how to customize it? the width the height and the position?

nice this one sir,
i will try on my blog
WebInfoAndroid
WebInfoSehat
WikiBlogGadget
Thank's bro

Nice widget and look eye catching. Top!