ADD ZOOM EFFECT TO THE POPULAR POST WIDGET USING CSS v2

This tutorial helps you to customise your popular post widget and displaying it with attractive layout. After following below mensioned step(s) you will see how to introduce zoom effect to the popular post widget using CSS technique.



1.Login to your blogger dashboard--> Design- -> 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'><br />.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;}<br />.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;}<br />.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) ;}<br /></style> <br>


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

4 Now Click on Save Template,

5.Now Set Settings Your Popular Posts Widget.

6. Now Save Your Popular Posts Widget and You are Done.

Kindly Bookmark this Post using your favorite Bookmarking service: