About This Widget:
Popular Posts is a widget which every good blogger uses. From small blogs to all big blogs you can see Popular Posts widget. It helps to decrease bounce rate of your blog. I have already added three popular posts widget in my blog. This one is a bit different and looks more elegant. It has a rotating effect when hovered on any of the thumbnail. To add this widget in your blogger blog follow the below steps given.
Adding CSS In Edit HTML:
- Go To Layout Option Of Your Blog →Add A Gadget →Popular Posts And Don't Forget To Check Show Thumbnails.
- Now Go To Template → Edit HTML And Expand Widget Template And Serch For The Below Code By Pressing Ctrl+f.
]]></b:skin>
- Add Below Code Just Above/Before ]]></b:skin>
.PopularPosts .item-title { display:none; } .PopularPosts .widget-content ul li { background: none repeat scroll 0 0 transparent; float: right; list-style: none outside none; margin: 10px 0 0 !important; padding: 0 !important; } .PopularPosts .item-thumbnail { margin: 0 8px !important; } #PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);-moz-box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);} .item-thumbnail img { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; border: 3px solid #ccc; height: 60px; padding: 3px; width: 60px; }Once you have added the code save the template.
You are done now. Now you and your visitors can see this awesome Popular Posts widget with rotating hover effect in your blogger blog.
Tags: Stylish Popular Post For Blogger,Stylish Popular post Gasget For Blogger,Stylish Popular Post Widget For Blogger,Fancy Popular Post widget,Beautiful Popular Post widget.

0 comments:
Post a Comment