Home » Blogger Tutorials, Tricks and Hacks » Popular Post Widget With Rotating Hover Effect

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Popular Post Widget With Rotating Hover Effect

Popular Post Widget With Rotating Hover Effect

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error


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. You can check out this widget on its DEMO PAGE to see for yourself how it looks like and how it exactly behaves.

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)

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

#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'>
<b:loop values='data:posts' var='post'>
<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>
<!-- (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 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'/>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div style='clear: both;'/>
<!-- (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>
<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>
<div class='clear'/>
<b:include name='quickedit'/>

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

And you’re done!



Liked It ? Please Share


3 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. sid says:

    nice one dude 🙂

  2. allan says:

    how do u use this on post thumbnail?

  3. Abel says:

    please help me. The code do not works in my website. I test the code in others of my blogs and works perfectly but in this not. Thanks! nice works

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here