Attractive Blogger Popular Post Widget With Different Style

Popular Post is a widget which display your popular blog post with title, thumbnail and description based on your analytic stats. So Blogger's Official popular post widget nice but here I given an CSS which will customize your popular post widget with attractive and a different style.

 There is no need of implementing any heavy JavaScript. Just add the CSS code to your blog template, it's very easy to add.

 The CSS code will hide your description of popular post widget and whenever mouseover on it will display description by sliding with simple transition effect I've used here.

Live Demo

How To Create Attractive Blogger Popular Post Widget

Note: First of all you should add Popular Post widget on your blog with thumbnail and snippet. I think most of the bloggers already know how to add popular post widget, so there is no need of explaining for adding widget on your blog.

1. Go to Blogger Dashboard > Template > Edit HTML.

2. 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...

SHARE

Tweet