Customize Popular Post Widget with CSS

As you guys all know that 'Recent Posts' widget or 'Popular Posts' widget is very essential widget (or gadget) for both personal and professional blogs. This widget gives your latest post information to your blog readers. So you should look after this widget very carefully. Also if you provide some style with this widget, your reader will be overwhelmed. By default blogger provides some styles for this widget but somehow these are obsolete and unprofessional. You are actually recommended to go through those styles for the first time. If you found that those are not suitable for your blog, you can come back to this. I have written quite a few posts about customization of this widget. You can also check those out in my blog in case you are interested. This post is also one of those customization using CSS. I think it is clear to everyone that why you should choose css instead of javascript or jQuery, because page loading time for css is much smaller than javascript or jQuery. Also css is very easy for understanding as well as to implement.

You may also like
• Customize Popular Posts Widgets with jQuery for Blogger.
• Replace Popular Posts Title with an Image

Features :
• Full control over 'Image thumbnail' view.
• Full control over 'Snippet' view.

Screenshots :

• 
• 
• 
• 
• 
• 
• 
• 

All right, let's proceed.

Before you make any changes in your blogger template, it is recommended to backup your blog in case something goes wrong.
It is just a cautionary statement. Don’t get scared. Just stay serious.

Let's proceed.

1. Sign in to Blogger.
2. Click the Drop-down arrow adjacent to 'Go to post list' icon.
   
3. Click 'Layout' form the drop-down menu list. It will open the layouts of different widgets (or gadgets) of your blog.
4. Click 'Add a Gadget' link as shown in the fig below. A new window will open that contains list of all gadgets available.
   
   
5. Scroll down and when you see 'Popular Posts' gadget, click on it or click the '+' icon as shown in fig below.
   
   
6. This will take you to a new window named as 'Configure Popular Posts'.
   • Select the 'Most viewed' option to 'All time' .
   • Select number of the post(s) in 'Display up to' section.
   • Check 'image thumbnail' if you want to show it, otherwise leave it as unchecked.
   • Check 'snippet' if you want to show some post texts along with its title.
   
   
   
7. Hit 'Save'
If your blog already contains this widget, you don't need to repeat the part that has been discussed so far.
8. Click 'Template'
   
   
9. Click 'Edit HTML'.
   
10. Make sure that 'Expand Widget Templates' is checked.
11. Search for (
    Ctrl
    +
    F
    ) </b:skin and paste these codes before </b:skin

/* Popular Post style using CSS by Bloganalyzer
-----------------------------------------------------*/
.popular-posts ul { padding-left:0px;}
.popular-posts ul li {
  background: #fff url('http://3.bp.blogspot.com/-A8wScn00rmA/UAxqGwS8ZkI/AAAAAAAAA0c/xAq7i5vm0i0/s1600/bg1.PNG');
  font: 14px "Andalus", Times, Serif;
  margin:0 0 9px 0px !important;
  padding:10px 10px 10px 20px !important;
  border: 1px solid #dddddd;
  -moz-border-radius:5px; 
  -webkit-border-radius:5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 2px 2px 8px #222;
  -webkit-box-shadow: 2px 2px 8px #222;
  -ms-box-shadow: 2px 2px 8px #222;
  box-shadow: 2px 2px 8px #222;
  cursor: default;
}
.popular-posts ul li:hover { 
  -moz-box-shadow: 5px 5px 15px #222;
  -webkit-box-shadow: 5px 5px 15px #222;
  -ms-box-shadow: 5px 5px 15px #222;
  box-shadow: 5px 5px 15px #222;
  padding: 15px 15px 15px 25px;
  border: 1px solid #06e;
}
.popular-posts ul li a {
  font: 18px "Georgia", Times, Serif;
  color: #800;
}
.popular-posts ul li a:hover { 
  color: #080;
  text-decoration:none; 
}
.popular-posts ul li img {
  background: #eee;
  border: 1px solid #ddd;
  -webkit-box-shadow: 1px 1px 3px #555;
  -moz-box-shadow: 1px 1px 3px #555;
  -ms-box-shadow: 1px 1px 3px #555;
  box-shadow: 1px 1px 3px #555;
  padding: 0;
}

12. Hit 'Save template'

If you have any questions on this, please let me know. Enjoy !