Customize Blogger's Official Popular Posts Widget

Popular posts widget

I rarely use a tool unless I know I can design it according to my preferences. Blogger Team introduced their official Popular Post widget which could display a snippet of your most viewed posts along with a thumbnail image based on your Analytics stats. But wait! the widget today is a step ahead of it. We will override the stylesheet for this widget completely with our custom fonts and colours. You can view this popular gadget right on our sidebar.

The biggest advantage of this widget is that we don't need to install any heavy Javascript because we are using a widget stored on Blogger's servers and we will just alter its look to make it blend perfectly with your blogspot blogs.

I hope you will find today's tutorial pretty interesting. So lets go playing!


Adding Popular Posts Widget To Blogger

  1. Go To Blogger > Design
  2. Click on add a gadget and select the "Popular Posts" gadget from the list provided by blogger
  3. Now make these settings

uncheck snippets and thumbnails

  • Set Most viewed to all time
  • Uncheck image Thumbnail and snippet. We only need to display popular links so we don't need that bulky image and unnecessary intro text.
  • You can display between 1 to 10 posts. So choose at least 7 posts.

       4.   Save your widget

       5.    Now go to Blogger > Design > Edit HTML

       6.   Backup your template

       7.   Search for this


       8.    Just above it paste the following CSS code,

/*--- MBT Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url( SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #dddddd;


.popular-posts ul li:hover {
border:1px solid #6BB5FF;

.popular-posts ul li a:hover {


Make these changes to customize the default look:

  • To change the bullet image replace the image link in bolded black in the code above with your bullet URL.
  • To change the border color in active mode edit #dddddd
  • To change the border color on mouse hover edit  #6BB5FF

You can use our color Chart for changing the colors.

   9.    Finally save your widget and say bingo!

Visit your blogs to see it hanging just fine on your sidebar. Do let me know if you needed any further help in changing the font type or color. The widget will automatically apply to it default colors of your blog but in case you wish to change them to something different then feel free to let me know by posting your comments below.


This widget model is brought to you by MBT therefore if you liked this widget and wish to share it with your readers then kindly link back to this tutorial. Peace buddies. :)

You may also like: Popular Posts Widget With Rotating Slides

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 »


We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
    I was about to e-mail you to teach this as i saw it on ur blog few days back but i did not said because of your Exams .... Thanks a Lot ... When i first saw it i was in Love with this widget <3

  2. @Mohammad
    well,honestly i wont comment on the post because I do not know about it.But dude, its looking nice on your blog.A good addition:)

  3. I am using monop template and i cant add this as i want this widget after Labels and blog archive

  4. @Haider

    My Pleasure buddy. So did you add it Haider? :)

    Thanks Aiman. It actually displays the most viewed posts in hierarchical order. It is a programmed script that fetches most popular posts and displays them. Glad you liked it. :)

    Don't add it inside the Multi-Tab widget. Add it separately and you will see it working just perfectly. :)

  5. thanks for this let me go and do it on my blog

  6. Hey Mohammad Vai,
    Can you make same style effects for bloggers Random and Recent Posts widgets ?

  7. @Mohammad
    So mohammad,can you code this 'Topic' section with this widget?Like, here it would fetch the topics from the given list and arrange them in hierarchical order.Means , all topics you are displaying right now should be displayed but with an order. It would also help you to figure out what is readers' demand.

  8. This comment has been removed by the author.

  9. @Mustafa Bhai

    ya i added it bhai :)
    But it did not suite well with my template :(

  10. This comment has been removed by the author.

  11. Nice Information..
    keep share guys...
    :) :D

  12. @kingsley
    Oh you must do it soon. :)

    @Abu saleh
    Sure we can customize them too. I just got free so I will look into their style sheets. Thanks buddy for the idea.

    Well we already have many widgets for that like Archive. The Topics widget on this blog is actually called a cloud widget which shows all your blog categories.

    Oh come on. Did you customize the colours? Do it and show me the demo.

    My pleasure pal. :>

  13. @Mohammad Mustafa Ahmedzai
    bhai colours is not the problem, size is the problem ....
    My template is a 3 column template and the post body is in the middle so side bars do not have much space so it is not looking that much beautiful as i wanted :(
    but i added it, u can see w w w.skfanclub. c o m

  14. thanks a lot dude...

    i m done it in my blog

  15. Thank you mohomad ! you made my blog site much pretty :) Thank you for sharing this kind of wight with us ! Thanks again. ( its so simple ad pretty ^_^ )

  16. @haider
    I get you now. Haider I Guess its time you pay focus on your site's design. A Magazine style template is the standard for better blogging success. Ad networks like BuysellAds except mostly sites with traffic (which you have) and blogs with wide and clean user interface. It would be difficult to make such a decision but the good decision always yield better results.

    YOu are welcomed pal. :>

    My pleasure bud. :>

    You liked it thats enough for me. Thank you too bro. :)

  17. i m little confused :/
    u mean my template should be modified ?
    if i have to modify only for buysellads than i do not want to because i have asked my 50K readers and they give me good feedback and i think the template is good user interface. i have made some changes. hope u see them and give ur opinion again :)
    Thnx bhai for the reply .......
    i have modified my template very hardly. i have not learnt any programming but i did with with many tricks and thnx to MBT and Google Chrome :) sometime i will write the post on google chrome tricks which can help in HTML.
    my template was this :
    h t tp://btemplates.c o m/2011/blogger-template-nitromac/demo/

    which i made changes and converted into this
    w w w . sk fa nc lub . c o m ( spam protection :)

  18. i m confused with ur this line :P
    " It would be difficult to make such a decision but the good decision always yield better results "
    i m little week in English for some reasons :)

  19. @Haider
    If you really don't want BSA ads then sure you can get along with your current template. Your template indeed looks awesome. I observed that the images are not in their exact aspect ratio. When you set the image size only set the width, the browser will automatically set the height. If this did not work then youy photoshop.

    That phrase meant for better monetizing your template for higher CTR. A wider design gives more space to ads and increases the chances of Click rate. Hope this clarifies all. :>

  20. Is there a way to make this use thumbnails only? And can you increase the thumbnail size without it getting blurry?

  21. This comment has been removed by the author.


  23. CSS not working for my blog =(

    my blog:

  24. Wow.... Its make my blog looks awesome. Thanks for sharing

  25. Can you do it on Bloggers Dyaminc View,

    If you know Ask you to reply/

  26. Hi,
    thanks so much for this information. I tried to find the code in my html > but all I found was >b:skin><![CDATA]/*------ is that the right one? Also the only thing I want to change is the picture that is shown of my popular posts, the default chooses a random picture which tends to be the before picture and I want the after picture. Should I still copy and paste the whole section you have? I am fine with colors etc. that are already there. Thanks!

  27. The upper line of the uppermost box is transparent or missing. Please help. Check

  28. Can you please guide me how do i customize my all i have seen one blog regarding customization of blog that blog post i have used a css code for popular posts when i added that code in my blogger account. those css rules have applied to my blog's popular do i know that for which widget i have applied the css simply adding .popular-post{,,,,,}, such kind of code affected my blog likewise i have applied the same to my recent posts widget but no change occured..Could you please give me better solution to understand..for better understanding of m issue you can visit my blog

  29. Sorry dude but its not working for me

  30. Hello i have a blog named where i have placed popular post widget see that it is also intresting given by

  31. This comment has been removed by the author.

  32. That was a good tip !! thanks dude !!

    everybody feel free to vist my blog at

  33. sorry bro,its not working in my blog....i tried twice but it wont..

  34. how to categorise our post?
    pls gv me instrcts

  35. Very Nice! it showing but not schrolling. check

  36. Thanks for the discussion. Do you know if there's a way to have the widget overlook certain posts so they won't be included in the most popular? For example: suppose I have 100 posts, 85 of which are on the topic of the blog, and the other 15 are housekeeping items. I want to prevent any of the 15 housekeeping items from appearing in the widget. Is there a way to screen them out of the calculation (without deleting them from the blog)?

  37. I want to know how can I put up my favorite blog posts, Which I think everyone should read in a thumbnail or anyother form just like the popular posts widget.

  38. cooool trick muhommad keep writing good content...

  39. Why it does't work if I put the Popular post widget inside of multi-tab??
    Please give me solution..

  40. Hi Friend How To use this style recent post and other like random post recent comment plz post solution fast

  41. Is there any relation about seo using popular post? Just like archive and labels.

  42. great one but.. i want to make hover effect to popular post when mouse is put over it...
    like when mouse is rolled over it. the colour should change of the background and not only the borders

  43. But it didn't work in Salhuddin template

  44. This comment has been removed by the author.

  45. thanks for this code.
    Thank you so much.

  46. Please i have this widget on my blog, but it doesn't display on my blog's mobile version. I Want steps on how to make my popular post widget appear on my blog's mobile version too. please e-mail me with Thank you.

  47. Sir Can we use it with image thumbnail ? will this for ?

  48. Great post! Thanks for your help! ;)

  49. Great post, I did exactly as directed, it worked , at