Popular Post Widget With Rotating Hover Effect

Now here’s a nice little Blogger widget that you might like to have on your site. It’s another gadget created by Sonu and basically it is a gadget that displays your popular posts in thumbnail mode. Whenever you hover your mouse cursor over it is it gives it a rotating effect.
By using this gadget, navigating your popular posts section can be a fun experience for your ite visitors..
So how you put this in your blog site? Just follow the instructions below (NOTE: Remember, it is always good practice to backup your template first before making any design changes to your blog).

1. On your Blogger dashboard, go to ‘Template’ then ‘Edit HTML’
2. Put a check mark on the ‘Expand Widget Templates’ box
3. Look for this code (by pressing Ctrl+F)

]]></b:skin>

4. Then copy/paste this code right before or above it

#PopularPosts1{max-width:300px}

#PopularPosts1 dd{float:left;border-bottom:none;margin:8px 8px 0 

8px;background:none;display:block;padding:0}

#PopularPosts1 img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s 

ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from

(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, 

#c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba

(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);}

#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 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 

0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba

(255,255,255,1);}

5. Next, look for this line of code

<b:section class='sidebar' id='sidebar' preferred='yes'>

6. And then copy/paste this right below or after it

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' 

type='PopularPosts'>

<b:includable id='main'>

<b:if 

cond='data:title'><h2><data:title/></h2></b:if>

<div class='widget-content popular-posts'>

<ul>

<b:loop values='data:posts' var='post'>

<dd>

<b:if cond='data:showThumbnails == &quot;false&quot;'>

<b:if cond='data:showSnippets == &quot;false&quot;'>

<!-- (1) No snippet/thumbnail -->

<a expr:href='data:post.href'><data:post.title/></a>

<b:else/>

<!-- (2) Show only snippets -->

<div class='item-title'><a 

expr:href='data:post.href'><data:post.title/></a></div>

<div class='item-snippet'><data:post.snippet/></div>

</b:if>

<b:else/>

<b:if cond='data:showSnippets == &quot;false&quot;'>

<!-- (3) Show only thumbnails -->

<div class='item-thumbnail-only'>

<b:if cond='data:post.thumbnail'>

<div class='item-thumbnail'>

<a expr:href='data:post.href' target='_blank'>

<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' 

expr:width='data:thumbnailSize'/>

</a>

</div>

</b:if>

<div class='item-title'><a 

expr:href='data:post.href'><data:post.title/></a></div>

</div>

<div style='clear: both;'/>

<b:else/>

<!-- (4) Show snippets and thumbnails -->

<b:if cond='data:post.thumbnail'>

<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img 

expr:alt='data:post.title' expr:src='data:post.thumbnail' height='60px' width='60px'/></a>

<b:else/>

<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img 

alt='no image' height='60px' src='http://4.bp.blogspot.com/-A6NQTW-

MBZY/T37HVOov53I/AAAAAAAAAys/XLjZX6HrE50/s1600/defaultimage.jpg' width='60px'/></a>

</b:if>

</b:if>

</b:if>

</dd>

</b:loop>

</ul>

<div class='clear'/>

<b:include name='quickedit'/>

</div>

</b:includable>

 </b:widget>

7. Now click on the ‘Preview’ button. If you like what you see then hit the ‘Save template’ button.
And you’re done!