Numbered Popular Posts Widget for Blogger

Posted On // 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.

24 comments

Deep Sinha Author
7 August 2013 at 05:38

Such a nice and eye catching widget.

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

Reply
Shameer Pm Author
7 August 2013 at 11:38

Cool Widget.

Regards
www.TechandTalks.com

Reply
Gagan Masoun Author
9 August 2013 at 22:50

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

Such a nice and eye catching widget.

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

Reply
Deep Sinha Author
14 August 2013 at 08:37

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

Reply
14 August 2013 at 08:39

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

Hehe Bro !

Reply
Keerthi S Author
15 August 2013 at 02:06

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

Reply
15 August 2013 at 05:51

I will post it just now :)

Reply
1 September 2013 at 11:13

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

Reply
Pankaj Jangir Author
16 September 2013 at 03:49

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

Reply
MOSSAN Author
19 September 2013 at 04:29

Thanks,You made ma day

Reply
Ghost Rider Author
28 September 2013 at 05:10

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

Reply
amar nath Author
28 September 2013 at 05:51

Nice Post regards AtoZ Tricks

Reply
Lucas Acumen Author
29 September 2013 at 04:06

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

Reply
ajay istwal Author
30 September 2013 at 05:31

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

Reply
15 December 2013 at 07:48

it's work so good :

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

Reply
4 April 2014 at 06:05

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

Reply
Nitro Sonic Author
25 April 2014 at 14:27

Muchas gracias seguĂ­ posteando

Reply
29 April 2014 at 21:38

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

Reply
20 July 2014 at 08:15

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

Reply
Grace Joseph Author
19 August 2014 at 14:11

Pretty cool, this blog rocks!

Reply
Chef Juan Gfx Author
20 January 2015 at 08:09

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

Reply
baca thok Author
12 June 2015 at 18:46

Cool Bro, Look in my Site Bacathok

Reply
Ars Author
14 November 2015 at 22:58

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

Reply
10 February 2016 at 02:01

Nice widget and look eye catching. Top!

Reply

Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Numbered Popular Posts Widget for Blogger |