Numbered Popular Posts Widget for Blogger

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:

  1. Such a nice and eye catching widget.

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

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

    Such a nice and eye catching widget.

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

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

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

      Hehe Bro !

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

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

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

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

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

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

    ReplyDelete
  10. it's work so good :

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

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

    ReplyDelete
  12. Muchas gracias seguĂ­ posteando

    ReplyDelete
  13. 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

    ReplyDelete
  14. Hello Dhiraj !!
    Nice widget you have here !!!

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

    ReplyDelete
  16. Nice widget and look eye catching. Top!

    ReplyDelete