How to Add Popular Posts Widget in Blogger!

Hi,

Ever wondered how its possible to add a "Popular Posts" column in your blog? I'm sure you have, that is why you're here on this page. This is one of the most simplest widget to add to your blog, yet its a very handy one to have especially for your readers. Lets see how this can be done..

How To Add A Custom Popular Posts Widget In Blogger

Part-I

Add default popular posts widget:

• Login in to your Blogger account.
• Navigate to the layout section and click on add a gadget from sidebar.
• Choose popular posts widget from the gadgets list.
• You will be asked to make some adjustments for your popular posts widget, as shown below:

• You can choose what to display and how. Like if you don't want to display the post snippet, you can simply uncheck that.
• After making the important adjustments, click on add and save the arrangement.
• This will add a default blogger popular posts widget in your blog.
• Click on view blog to check the default blogger popular posts widget.
• You have just added built-in popular posts widget in your blog. Now we will customize its CSS styles to make it more attractive.

Part-II

Customize popular posts widget

• Navigate to the template section and take backup of your blogger blog.
• After taking backup click on edit HTML and find the code ]]></b:skin> using CTRL+F.
• Now carefully paste the following code just before the code.

/*UT Popular posts Widget Style Rules*/
.popular-posts ul{padding-left:0px;}
  list-style-type: none;
  margin:0 0 5px 0px;
  padding:5px 5px 5px 20px !important;
  border: 1px solid #ddd;
  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;
}
.popular-posts .item-thumbnail img {
  webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

• Click on save template and then view blog.

You have customized the default popular posts widget in your blogger blog and given it a new look. You can make more adjustments in the CSS style rules according to your blog. If you need any help or have any doubt you can comment here. You can also suggest improvements so that we can create more user friendly widgets.

Do you want more readers on your blog? Here are 5 Creative Ways to do that

Like Us on Facebook

Source