Popular Posts With Automatic Numbering - Bubbles!

Popular Posts Widget

When blogger released Popular Posts widget back in 2011, we leaked out its stylesheet so that you can customize it to blend it perfectly to your BlogSpot templates. Today we will learn how to display the list of popular posts using CSS3 auto increment property. You can style the numbers in variety of shapes, we styled them in square/rectangular and circular shape. you guys were the first to display threaded comments with Comment Counts and today you will again learn something more interesting. You can see a practical demo of this implementation on our sidebar. Lets add this effect to blogger in fairly easy steps using pure styles with no use of JavaScript.

Popular posts widget is an effective tool to increase your blog pageviews and engage readers more on your blog. It fetches and ranks posts based on most visited pages using your Google analytics data.

Add Popular Posts Widget

  1. Go to Blogger > Layout
  2. Click "Add a Gadget"
  3. Choose "Popular Posts"  from the list
  4. You will need to configure its settings as shown in the image below: uncheck "image thumbnail" and also "snippet"   Its better that you display at most 7-9 posts. Less is good and clean.

 

popular posts widget settings

       5.  Save it

 

Customize Popular Posts Plugin

Now you need to change the default styles and change its look to our desired design using Custom styles.

  1. Go To Blogger > Template
  2. Backup your Template
  3. Click Edit HTML
  4. Search for </b:skin>.  Click the black arrow to expand the code.

compressed blogger stylesheet

   5.  Paste the following Styles just above </b:skin>

/*--- MBT Popular Posts --- */
.popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
}

.popular-posts ul li:before {
list-style-type: none;
margin-right: 15px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #292D30;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #dddddd;
box-shadow: 1px 2px 9px #666666; }

.popular-posts ul li {
border-bottom: 1px dashed #dddddd;
}

.popular-posts ul li:hover {
border-bottom: 1px dashed #696969;
}

.popular-posts ul li a {
text-decoration:none; color:#5A5F63;
}


.popular-posts ul li a:hover {
text-decoration:none;
}

Customization:

  • To change the background color of the Square bubble edit #292D30
  • To change the text color of the bubble edit #ffffff
  • By default the shape of the bubble is Square. To change it to Circle simply add the following code just after box-shadow: 1px 2px 9px #666666;

border-radius:15px;

 

    6. Save your template and you are all done!

Visit your blog to see it working just perfectly.

If you would wish to add it inside a Multi Tab Widget just like we have done on our blog, then you can find several tutorials on our blog that were released years ago on Multi Tabs. Please read one below:


Need Help?

I just hope you would find this tutorial easy and yet exciting. Please let me know if you need any help. I just hope you continue adding more colors and flavors to your beautiful blogs. Wish you success and peace buddies. :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

48 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. A great blog,....
    perfectly useful & informative

    ReplyDelete
  2. Awesome widget! Will use in mine blog new design! :D

    ReplyDelete
  3. Another amazing post bro. Keep it up.

    ReplyDelete
  4. Let me dare to try :) I am not a coding person :( so always dread to implement but really want to do it :)

    ReplyDelete
  5. Great! Thank you so much
    It worked for me by another method by placing the code in CSS not in Template :)

    ReplyDelete
  6. superb article..i implemented it on my blog http://www.webcodeexpert.com/ and it look awesome..i suggest all the bloggers to follow this article to give their blog superb look.thanks mohammad

    ReplyDelete
  7. Beautiful Wedget Mustafa Brother, its really look like nice and amazing.

    ReplyDelete
  8. wow nice one, can i use it with picture enabled?

    Cheers,
    trigonalworld.com

    ReplyDelete
    Replies
    1. Yes sure you can use it even with your images enabled but do you really think that will look nice? :)

      Delete
  9. When I get really cool! Thanks, keep up the good work with the incredible lessons.

    ReplyDelete
  10. Thanks for sharing bro mustafa

    ReplyDelete
  11. So Muhammad is back..huh..:-)
    I missed a lot your presence on this blog..:/
    After seeing your work it seems like you are really free from the exams :-D

    As usual and like thousand of I will also say others Muhammad your work is awesome..


    → this work of mine will seem like nothing..before your knowledge and talent and passion...Sounds like a disciple is teaching his own teacher..;-D

    http://trackbloggers.blogspot.in/2013/05/multicolored-labels-widgets-for-blogger.html

    ReplyDelete
  12. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. First of all, remove the CSS of that Popular posts widget that you are already using in your blog. Then untick snipping and thumbnail option by editing popular posts widget. Finally, Copy the CSS and paste it above </b:skin> . Hope it will work now :D

      Delete
  13. i REALLY LOVE THIS. BUT I GOT A PROBLEM WITH YOUR BLOG. ITS SLOWS DOWN MY BROWSER.

    ReplyDelete
    Replies
    1. Really? But it is the same widget provided by blogger. We only changed its stylesheet. you better upgrade your Net speed then Stefn! ;p

      Delete
  14. Bro I'm waiting for this new commenting system release anxiously. Please release it soon :D

    ReplyDelete
  15. Mohammad, I left a comment before but looks like it got deleted. This widget is not working on my blog unfortunately. Please have a look:

    http://cricketnns.blogspot.com

    Thank you so much!

    ReplyDelete
  16. Mohammad Bro, I tried this 3 times on my blog, but it's not working. i dont know why, please check my mistakes please
    my blog: dailyhealthdairy.blogspot.com
    i use Salahudeen Ayubi template.
    thanks and God bless bro.

    ReplyDelete
  17. hey hemant
    i have also upgarded to custom domain but my site is not opening at custom domain, you can check it www.windowsreloded.com
    it open at windowsreloded.blogspot.com
    please help??
    i also registered domain from godaddy and it's not opening directly and i have to open it through blogspot

    ReplyDelete
  18. Update:

    For all those for whome the above code is not working kindly use the following instead becaue Blogger sucks sometime. This one will work just fine! :)

    /*--- MBT Popular Posts --- */
    .popular-posts ul {
    padding-left: 0px;
    counter-reset: popcount;
    }
    .popular-posts ul dd:before {
    list-style-type: none;
    margin-right: 15px;
    padding: 0.3em 0.6em;
    counter-increment: popcount;
    content: counter(popcount);
    font-size: 16px;
    background: #292D30;
    color: #ffffff;
    position: relative;
    font-weight: bold;
    font-family: georgia;
    float: left;
    border: 2px solid #dddddd;
    box-shadow: 1px 2px 9px #666666; }
    .popular-posts ul li {
    border-bottom: 1px dashed #dddddd;
    }
    .popular-posts ul dd:hover {
    border-bottom: 1px dashed #696969;
    }
    .popular-posts ul dd a {
    text-decoration:none; color:#5A5F63;
    }

    .popular-posts ul dd a:hover {
    text-decoration:none;
    }

    ReplyDelete
    Replies
    1. Thanks a bunch Mohammad!

      Cheers,
      Sai Ram

      Delete
  19. Replies
    1. Mohammad (MBT), have a look at this:

      http://danishasad786.blogspot.com/2013/06/popular-posts-widget-with-automatic.html

      This useless idiot just copied your post, made it his, and even has made the template his without respecting copyrights. Danish, learn to respect others first you piece of two clutz crap...

      Delete
  20. Oh wow, what a great popular posts! I really like the new style of popular posts. :)

    ReplyDelete
  21. Failed to apply it on my bellow blog :(

    http://brahvitime.blogspot.com/

    ReplyDelete
  22. Can you please give us the code for something like in a horizontal bar with automatic numbering like yours which shows ....

    ReplyDelete
  23. Thank you admin very nice style , I add it to my blog.
    If anyone getting no.9 and no.10 out of box like I get,

    search for ".PopularPosts .widget-" without quot in template code --> change pedding to 7px 3px and save your template

    this fix error and I'm getting all number in right place
    thanks

    ReplyDelete
  24. I tried both of your codes (the one mentioned in the post and the one mentioned int the comments as 'update') and they are not working on my blog. witheredpapyrus.blogspot.com

    My question is:
    - how can just adding a code after result into a new design? Some existing code has to be replaced, right? You have just mentioned that copy the code above . But what about existing code? Should it be deleted ? Should it be kept as it is? Please clarify.

    ReplyDelete
  25. thats something extremely awesome sir!
    But i would like to take your minute.
    Would u please explain to implement this coding for my 'Pages list' as well? I would be extremely honored by your help.

    Check my blog to see the need of this implementation
    http://compenggworld.blogspot.com

    ReplyDelete
  26. Hello sir....In my case auto numbering not working.Please help me sir
    Please give any tips or i think any codings which facilates this autonumbering missed in my template
    www.mytechblaze.com

    ReplyDelete
  27. This comment has been removed by the author.

    ReplyDelete
  28. Thanks for all of your blog tricks. I am also using your template.Thank you very much.

    ReplyDelete
  29. hi sir??
    how to show the popular post just title without description???

    ReplyDelete
  30. i have done for my question. Thanks

    ReplyDelete
  31. awesome
    i try right away
    please visit my website as well
    thanks

    ReplyDelete
  32. Sir.i have installed it on my blog but it show only 1 number in bubble.please help sir

    ReplyDelete
  33. this is to excellent wedget for every new blogger i added the wedget in my own blog and after the added my blog is loking nice tnxx buddy for this beautifull artical

    ReplyDelete
  34. Thanks so much for this wonderful work. I did it and it works, excellent.

    ReplyDelete