29 Jul 2013

Customized Stylish Popular Posts Widget With Round Thumbnail in Blogger



Popular posts widget in blogger is the best widget which helps to represent the whole blog in a better way to the visitors. It shows the most popular posts of a blog to the readers  so that they can also read them. This amazing gadget in blogger sidebar helps to highlight the trending posts in front of readers. Except these benefits, there is also a limitation of this widget. The only limitation is that the default popular posts gadget is not so attractive and attention grabbing because of its designing and dull looks. But don’t worry, we can override its stylesheet and change its colors and fonts according to our need so that it matches best with our blog template. In today’s tutorial I will tell you the way to make this gadget more prominent and stylish so that it grabs your visitor’s attention. We will customize the default gadget to transform it into a masterpiece. So, let start the tutorial.

Add Popular Posts Widget To Blogger Blog

First we need to add default popular posts widget into our blog. Perform the following simple steps to add it.
  1. Go to Blogger > Layout.
  2. Click on Add a gadget link and choose popular posts gadget from the gadgets list.
  3. Now make following settings

  • Set most viewed to Last 7 days
  • Check image thumbnail and snippet to show thumbnail along with post summary. It will make our gadget spicier.
  • Select no. of posts you want to show. In this example I am selecting 5. You can show at most 10 posts.
  1. Save the widget.
  2. Now go to Blogger > Template
  3. Backup your template to prevent it from any crash.
  4. Edit HTML > Proceed
  5. Search ]]>
  6. Now replace it with the following code:
/*—MYBLOGGERSKILL — */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb8OwJ4ctElR7tGluRKosvP5o6L6AfbjMwl6AuR8IHf0oDYWV5YbckQkFNpZQ1FM_8ynI5OtB7LEEFkJpI9VAzXVsLXKSCinx-Eg8XKJE1GAF8GaX47MpEyB-S6bAfCgW6X9X8eHGK7dM/s1600/1.gif)  no-repeat scroll 5px 10px;
  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);
}
]]>
  1. Save your template.
  2. Done!
Now visit your blog and check this fancy popular posts plugin in your blog sidebar.

Final Words! FROM MYBLOGGERSKILL

This was all about how to add stylish popular posts widget to blogger blog which shows round image and post summary. This gadget will help you to increase blog pageviews and play a foremost role to reduce blog bounce rate. Hope you find this tutorial pretty interesting. 


2 comments:

  1. It worked, but only displaying the previous posts. I'm having trouble with the new ones as it doesn't display the thumbnails, any advice? Please help! http://angiebenju.blogspot.com/

    ReplyDelete
  2. Hello Dear,
    Thank You very much for this nice post. This is a great help for me. And it worked well for me.
    THANKS

    ReplyDelete

Ads Inside Post