Saturday , December 16 2017

5 Stylish Popular Post Widget for Blogger

Most blogger users search new things for their blog and they want to build a unique blog template than others. Our blog helps for those bloggers and we bring new things every day like new template, unique widget, CSS menu and more things about blogging. In this post, we are going to customize blogger popular posts widget. This a default widget which already added in blogger and we can easily add from blogger gadget store. This widget shows most viewed posts according to its setting. If I describe its style which has three styles

  • Post title, short description, and image thumbnail
  • Only post title
  • Post title and image thumbnails.

We can use this three style by default. Some people don’t like default style and wanted to add a unique style. So in this post, I bring five styles. Select your favorite style from below and add your blog.

popoular posts widget for blogger

How to customize popular post widget in blogger

To customize this widget first you need to add this widget from layout section. Now select your favorite style from below five styles, click on view button and copy the CSS code from pop window.

  • Then login to your blogger account
  • The Select template then edit HTML after proceeding you can see your blog coding.
  • Now search ]]></b:skin> (you can use ctrl+f from your keyboard to find easily).
  • Paste the copied code just above from this tag and save the template.
  • Now view your blog. I hope you successfully apply CSS style in the popular posts widget.

Colorful popular posts

With the help of below CSS code, you can add a colorful in this widget. For every post separate color with image css3 and we can up to eight colors.

Popular Post Widget for Blogger

Round image popular posts.

If you want to make its images round, then add below code. Which will help you to create round images with hover effect.

Numbered the popular posts.

Below code will help to add auto numbered in this widget posts and also add a CSS hovering effect.

Round Corners Popular Post Widget

Grid Layout For the Popular Posts Widget

Popular Post Widget for Blogger

Multi-color Popular posts widget

multi-color popular posts widge

Popular posts widget with gradient effect

popoular posts widget gradient

If you want to create a gradient effect in this widget then add the below CSS code to your blog template. This isn’t actually gradient, but we could use the variety of colors to generate the gradient effects. It resembles the color gradient from black to white or maybe dark blue to light blue.

Check Also

social media share button for blogger

Responsive Social Media Share Buttons for Blogger

Are you looking for social media share button for blogger? In this post, I want …


  1. Thanks, to share the widget. I really like it

  2. this code not working how to use plz tell me thxxx

  3. Cool! Everything worked, I was searching for something like that for a while…. thanks for your help!! 😀

  4. its horozantilly how can v change it to verticaly

  5. Thanks a lot for this tutorial , i added it on my blog
    i will come back often to visit your tutorials

  6. Thank You very much for your nice and helpful article. That's Definately gonna help the new bloggers like me.

  7. Thanks a lot for this wonderful post. I see this and add this widget to my blog:
    Hope to see more posts from you. 🙂 Thanks.

  8. Simply want to say your article is as astonishing.
    The clarity in your post is simply excellent and i can assume you’re an expert on this
    subject. Fine with your permission let me to grab
    your RSS feed to keep updated with forthcoming post. Thanks a million and please carry on the rewarding work.

  9. The Blogger Philippines

    This is amazing = )

Leave a Reply

Your email address will not be published. Required fields are marked *