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.

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.

View Code

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.

View Code

Numbered the popular posts.

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

View Code

Round Corners Popular Post Widget

View Code

Grid Layout For the Popular Posts Widget

View Code

Multi-color Popular posts widget

View Code

Popular posts widget with gradient effect

View Code

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.

Share