Adding beautiful Popular Post Widget To Your Blogger Blog

You can see my another blog Demo click here

• Go to Blogger Dashboard > Template > Edit HTML.
• Find ]]></b:skin> (Press Ctrl+F to find) and Paste the following CSS code before it.

.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%}

Now visit you blog to see the new changes of your popular post widget and if you any question regarding this tutorial feel free to ask by posting comment below...