How To Create Spinning Popular Post Widget in Blogger

SEE DEMO

1. Go to Dashboard ->> Design ->> Edit HTML

2. Search this code (Ctrl + F), ]]></b:skin>

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

<style type='text/css'>
.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;}
.PopularPosts ul li img {padding:0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;height: 80px;width: 80px;}
.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}
</style>

Note: Make sure you add Popular Posts widget to your blogger sidebar. 

4. Now save your template,

5. Edit your Popular Posts widget setting into something like this...

6. Save it.


Refresh your blog to see the result. Cool huh? Good job!


Leave your comment!