Popular post Widget with Hover effect for Blogger

Pin It Now!

Popular post widget is already given by the blogger but here we are giving it for you in anew way.we are providing it here with mouse hover effect this widget is purely CSS based and it's very simple to add it to your blog



You can see Live Demo in my Blog

STEP 1

1.Go to blogger Dashboard>Layout>Add a Gadget.
2.Now add Popular post Gadget.
3.Now go to Templet>Edit HTML>Proceed.
4.Backup your templet first.
5.Now check the box  Expand Widget Templates
6.Press Ctrl+F and find ]]></b:skin>
7.Now Paste the Code shown below just above/before ]]></b:skin>

#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-gradientundefinedlinear, left top, left bottom, fromundefined#eee), color-stopundefined0.5, #ddd), color-stopundefined0.5, #c0c0c0), toundefined#aaa));background: -moz-linear-gradientundefinedtop, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgbaundefined0,0,0,.7);-moz-box-shadow: 0 0 3px rgbaundefined0,0,0,.7);box-shadow: 0 0 3px rgbaundefined0,0,0,.7);}
#PopularPosts1 img:hover{-moz-transform: scaleundefined1.2) rotateundefined-350deg);-webkit-transform: scaleundefined1.2) rotateundefined-350deg);-o-transform: scaleundefined1.2) rotateundefined-350deg);-ms-transform: scaleundefined1.2) rotateundefined-350deg);transform: scaleundefined1.2) rotateundefined-350deg);-webkit-box-shadow: 0 0 20px rgbaundefined255,0,0,.4), inset 0 0 20px rgbaundefined255,255,255,1);-moz-box-shadow: 0 0 20px rgbaundefined255,0,0,.4), inset 0 0 20px rgbaundefined255,255,255,1);box-shadow: 0 0 20px rgbaundefined255,0,0,.4), inset 0 0 20px rgbaundefined255,255,255,1);}

STEP 2

1.Now Press Ctrl+F and find <b:widget id='PopularPosts1' 
2.Now Delete the Code.


<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
        ....................................
        ....................................


</b:includable>
</b:widget>

3.Now Paste the code given below in place of above code.

<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;'>
<!-- undefined1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- undefined2) 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;'>
<!-- undefined3) 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/>
<!-- undefined4) 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy-UtVhKWoruQ8wGeI6zIdmS1e8wogbIvJVGHKIj96-rVftCOlNXOSvk9qubjZwuKMreVpPVlimsNCH_qEMxGnPFroJzM_u1MnUlQltbCtYYaWuXR0qkqwA5mwRI8mG7VnmRHpjPGsBBw/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>

Enjoy.......................

Pin It Now!