Beautiful Popular Posts Widget for Blogger

Popular posts widget displays the most viewed posts of your blog. Blogger also provides its Default popular posts widget but it is not so much attractive and doesn't attract your visitors. Blogger default widget only allows you to set the number of posts you want to show, most viewed pages of all time, 7 days or 30 days and what you want to show post title with image/snippet or both. But you can also customize it to your own taste using simple techniques. Today we are going to learn that how your can customize Blogger Default Popular posts widget. In the image below the preview on right side is before hover and on hover it slides out a short description of that post just like the left one.
Recommended for you:
3 Different Popular Posts Styles for Blogger
Add 2 Stylish Custom Popular Posts Widget to Blogger
Multi-Colored Popular Posts widget for Blogger

How to Customize Popular Posts widget

Step 1. Add the Default Blogger Popular Posts with Image and snippet
Step 2. Go to Template and click on Edit HTML Button

Step 3. Search ( Ctrl +F ) for the following tag :

]]></b:skin>

Step 4. Now copy the below code and paste it just above/before it ( ]]></b:skin> ).

.PopularPosts .widget-content ul li{padding:0;position:relative}
.item-snippet {
font-size: 90%;
line-height: 1.2em;
position: absolute;
width: 230px;
background-color: whiteSmoke;
padding: 7px;
border-top: 2px solid #FF0202;
z-index: 2;
left: 300px;
top: 60%;
height: 4.5em!important;
visibility: hidden;
opacity: 0;
transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
-moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
-webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
-o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;}
.PopularPosts .widget-content ul li:hover .item-snippet{left:60px;opacity:1;visibility:visible}
.PopularPosts img{width:50px;height:50px}
.PopularPosts .item-title{font-family:'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;font-size:125%}