How To Add Blogger Popular Posts Widget With Zoom Effect / Using CSS



1.Login to your blogger dashboard--> Desing- -> Edit HTML
2.Scroll down to where you see ]]></b:skin> tag .

3.Copy below code and paste it just After ]]></b:skin> tag


<style type='text/css'>
.PopularPosts .item-title{display:none}
.PopularPosts .widget-content ul li{background:none repeat scroll 0 0 transparent; float:left; list-style:none outside none; margin:10px 0 0 !important; padding:0 !important}
.PopularPosts .item-thumbnail{margin:0 8px !important}
.item-thumbnail img{-moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; transition:all 0.5s ease; border:5px solid #666; height:40px; padding:3px; width:40px}
.item-thumbnail img:hover{border:5px solid #BBB; -moz-transform:scale(1.3) rotate(-5deg); -webkit-transform:scale(1.3) rotate(-5deg); -o-transform:scale(1.3) rotate(-5deg); -ms-transform:scale(1.3) rotate(-5deg); transform:scale(1.3) rotate(-5deg)}
</style>

Note: Please You first Add Popular Posts widget to Your Blogger Sidebar. (Blogger widgets list..)

4 Now Click on Save Template and You are Done..

Cheers.

0 comments:

Post a Comment

Recommend us on Google!

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More