Customize Popular Post Widget with CSS3

'Recent Posts' widget or 'Popular Posts' widget is very essential widget (or gadget) for blog. It displays your popular blog posts (obviously based upon some analytic statistics) along with image, title and description (obviously these are optional). By default blogger provides some styles for this widget but somehow these are obsolete and unprofessional. I have written quite a few posts about customization of this widget. This post is also one of those customization using CSS3 transition property. The main reason for using css instead of java-script or jQurey is that it requires less time for loading of the page. Also css properties are very easy to understand as well as to implement. Hope you will like it.

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

✔ Features :

• Control over 'Image thumbnail' view. Although it is recommended not to check 'Image thumbnail' check-box for the better view (and performance) of this widget.

✔ Screenshot :

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.

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 show you 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 'snippet' but uncheck 'image thumbnail'. This is important.

7. Hit 'Save'.
   If your blog already contains this widget, you don't need to repeat the above part.
8. Click 'Template'.

9. Click 'Edit HTML' (if you are using old interface of blogger, make sure that 'Expand Widget Templates' is checked).

10. Search for (
    Ctrl
    +
    f
    ) </b:skin and paste these codes before </b:skin

/* Popular Post style using CSS3 by Bloganalyzer
-----------------------------------------------------*/
.PopularPosts .widget-content ul li{
position: relative;
padding: 0;
}
.PopularPosts .item-snippet {
position: absolute;
left: 20px;
top: 100px;
font-size: 15px;
line-height: 1.2em;
width: 230px;
background-color: #ececec;
padding: 7px;
border-top: 2px solid #0009ca;
z-index: 2;
height: 4.5em;
visibility: hidden;
opacity: 0;
transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
.PopularPosts .item-snippet:before {
content: "";
position: absolute;
left: 10px;
top: -8px;
height: 0;
width: 0;
border-bottom: 7px solid #0009ca;
border-left: 5px solid transparent;
border-right: 5px solid transparent
}
.PopularPosts .widget-content ul li:hover .item-snippet{
top: 105%;
opacity: 1;
visibility: visible;
}
.PopularPosts .item-title{
font-size: 20px;
padding-left: 5px;
}

11. Hit 'Save template'

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