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.
See Live Demo of Popular Post Widget on Sidebar >>>>
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| .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%} |
