How to Add Popular Post Widget With Hover Effect In Blogger

Now again i have made a new popular post widget which shows rotation effect on mouse hover. This widget is made using pure css, no script is used in it.

Popular Post Widget With Hover Effect Demo

How To Add Popular Post Widget With Hover Effect Widget To Blogger

• Go to Blogger Dashboard --> Design --> Edit HTML
• Backup your Template before making any changes to your blog
• Now Expand Widget Templates
• Find the code shown below using Ctrl+F

]]></b:skin>

• Now Paste the Code shown below just above/before 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-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);}

• Now Find the code shown below using ctrl+F

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

• Now Paste the Code Shown Below just below/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 == "false"'> <b:if cond='data:showSnippets == "false"'> <!-- 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 == "false"'> <!-- 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/AVvXsEggOQgEbNjEGU_v882lyDXE2lPDM7ryCpXTXy-R5RWIaPt6fOEIkABjIaOra8jkuJ8Nf4SwqvFUfs2JhipY8hK_a08LHGGy3Fo_FWd2-0i-N-gM4xH6DdgH6uF6rhQo1YMn1-5mLlq4pyQ/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>

• Now save your template (Click on )

You Also Like: TOOLTIPS RELATED POST WIDGET FOR Blogger WITH THUMBNAIL