New Elegant Popular Posts Widget for Blogger

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 Top 5 Best SEO Plugins for Wordpress article in my blog. Now I am adding an Elegant Square type Popular Post widget for blogger with SEO plugins.

Adding CSS in Edit HTML

1. Go to  Blog Title → Layout → Add Widget → Popular Posts. Add the widget and don't forget to check Show thumbnail option.

2. Now go to Blog Title → Template → Edit HTML. Expand <b:skin>....</b:skin> if it is not expanded. Press Ctrl + F and search for ]]></b:skin> in search box. [As per the new HTML editor]

Add the below given code just above ]]></b:skin>

Click here to view the code ;

 .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. If you face any Problem comment below: