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 18:08

Such a nice and eye catching widget.

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

Reply
Shameer Pm Author
8 August 2013 at 00:08

Cool Widget.

Regards
www.TechandTalks.com

Reply
Gagan Masoun Author
10 August 2013 at 11:20

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 21:07

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

Reply
14 August 2013 at 21:09

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 14:36

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 18:21

I will post it just now :)

Reply
1 September 2013 at 23:43

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 16:19

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

Reply
MOSSAN Author
19 September 2013 at 16:59

Thanks,You made ma day

Reply
Ghost Rider Author
28 September 2013 at 17:40

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

Reply
amar nath Author
28 September 2013 at 18:21

Nice Post regards AtoZ Tricks

Reply
Lucas Acumen Author
29 September 2013 at 16:36

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

Reply
ajay istwal Author
30 September 2013 at 18:01

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

Reply
15 December 2013 at 21:18

it's work so good :

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

Reply
4 April 2014 at 18:35

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

Reply
Nitro Sonic Author
26 April 2014 at 02:57

Muchas gracias seguĂ­ posteando

Reply
30 April 2014 at 10:08

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 20:45

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

Reply
Grace Joseph Author
20 August 2014 at 02:41

Pretty cool, this blog rocks!

Reply
Chef Juan Gfx Author
20 January 2015 at 21:39

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

Reply
baca thok Author
13 June 2015 at 07:16

Cool Bro, Look in my Site Bacathok

Reply
Ars Author
15 November 2015 at 12:28

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

Reply
10 February 2016 at 15:31

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 |