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


]]></b:skin>

       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(http://1.bp.blogspot.com/_7wsQzULWIwo/ 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;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;

}

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

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

 

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.

Credits

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 »

50 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. GREATTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT
    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
    :P

    ReplyDelete
  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:)

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

    ReplyDelete
  4. @Haider

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

    @Aiman
    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. :)

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

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

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

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

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

    ReplyDelete
  9. @Mustafa Bhai

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

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

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

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

    @Aiman
    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.

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


    @Mutri
    My pleasure pal. :>

    ReplyDelete
  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

    ReplyDelete
  14. thanks a lot dude...

    i m done it in my blog
    sadhakparivar.blogspot.com

    ReplyDelete
  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 ^_^ )

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


    @ndark
    YOu are welcomed pal. :>


    @umesh
    My pleasure bud. :>

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

    ReplyDelete
  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 :)

    ReplyDelete
  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 :)

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

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

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

    ReplyDelete
  22. http://www.bloggertricks.gr/2012/01/popular-posts-dimofileis-anartiseis.html

    ReplyDelete
  23. CSS not working for my blog =(

    my blog: http://damzshare.blogspot.com

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

    ReplyDelete
  25. Can you do it on Bloggers Dyaminc View,

    If you know Ask you to reply/

    ReplyDelete
  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!

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

    ReplyDelete
  28. Can you please guide me how do i customize my all widgets..as i have seen one blog regarding customization of blog widgets..in 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 posts..how do i know that for which widget i have applied the css rules..by 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 http://www.phphunger.com/

    ReplyDelete
  29. Sorry dude but its not working for me

    ReplyDelete
  30. Hello i have a blog named www.hackitparadise.in where i have placed popular post widget see that it is also intresting given by www.mybloggertricks.com

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

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

    everybody feel free to vist my blog at http://techplorium.blogspot.in/

    ReplyDelete
  33. sorry bro,its not working in my blog....i tried twice but it wont..
    visit:http://clicktechonce.blogspot.com

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

    http://techpicz.blogspot.com

    ReplyDelete
  35. Very Nice! it showing but not schrolling. check http://TrixKing.blogspot.com

    ReplyDelete
  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)?

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

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

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

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

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

    ReplyDelete
  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

    ReplyDelete
  43. But it didn't work in Salhuddin template

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

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

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

    ReplyDelete
  47. Great post! Thanks for your help! ;)

    ReplyDelete
  48. Great post, I did exactly as directed, it worked , at http://famefoot.blogspot.com

    ReplyDelete