How to Customize Popular Posts Widget in Blogger

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

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 @ https://www.facebook.com/groups/730927093629291

Share This:

Tags:

CSS Tricks Widgets

• Prevoius
• Next