Don't Miss

How to Customize Popular Posts Widget in Blogger

By Zohaib Liaqat - 4 Comments
Are you fed up because of the yucky and unclean design of the blogger Popular Posts Widget? Do you want to make your Popular Posts widget more prominent and attractive for your readers? Popular Posts is a widget provided by blogger, which allows you to display Popular Posts on your sidebar or footer. This widget shows the most visited posts of a blog, you have four different combinations for displaying this widget i.e.

1- Only the title of the post
2- Post title with summary
3- Post title with image thumbnail
4- Post title with image thumbnail and summary

Having a popular posts widget in the sidebar has a lot of advantages. It helps your visitors to check the most visited/popular posts of your blog, it encourages your visitors to navigate your content and the visitors will get more interested in your content. Therefore, if you want to stylize/customize the popular posts widget, and you want to make it more attractive for your visitors. In this article, we'll show you that How to Customize Popular Posts Widget in Blogger. Let's begin:
How to Customize Popular Posts Widget in Blogger

How to Customize Popular Posts Widget in Blogger

First and foremost, Log in to your Blogger Account >> Select a Blog >> Template and click Edit HTML. Click inside the template code area and by using Ctrl+F search for the ]]></b:skin> tag. Now copy the below code and paste it just above/before it (]]></b:skin> Tag)

.PopularPosts {
background: #fff; 
.popular-posts ul {
  margin: 0 !important;  padding: 0 !important; 
.PopularPosts img {  background: #fff;  border: 3px solid #CCCCCC;  display: block;  float: left;  height: 48px;  margin-right: 8px;  padding: 2px;  width: 48px;  
.PopularPosts .widget-content { 
font-size: 15px;  margin: 0 !important; 
.popular-posts ul li { 
list-style: none;  border-bottom: 1px solid #ccc;  border-top: 1px solid #FFFFFF;  padding: 0 !important;
.popular-posts ul li:hover {
background: #fafafa;  text-decoration: none; 
.popular-posts ul li a {
  color: #404040;  display: block; 
.popular-posts ul li a:hover { 
color: #262626;  text-decoration: none; 

Hit the Save Template button and you're done.
Congratulations: You've successfully customized your popular posts widget.

From Editors Desk

We hope this article may have helped you in customizing popular posts widget. Share this article with your friends, don't forget to subscribe us and Join our Bloggers Forum on Facebook @

4 comments to ''How to Customize Popular Posts Widget in Blogger"

  1. Evaluating your vehicle's worth will enable you to guarantee that you can get the most extreme sum conceivable on your auto value. When you utilize the KBB valuation as a benchmark, you can precisely evaluate the assessed estimating for your utilized auto. auto title loans chicago

  2. You share nice tutorial related blog, which give me some good ideas in creating my own blog, For More Popular Posts widgets you can
    Visit my blog here

  3. Many students are undecided about the best nursing research paper help Company to deal with due to the high number of companies that offer similar services.

  4. Students who seek best academic writing service from the custom writing company get good grades as the custom written term paper is well written without errors. They are also guaranteed of getting legitimate essay writing service that are free from grammatical errors.