Popular Post widget helps to identify most popular
post in your blog.So, Blogger already added the
that features for every blog.We can customize is
with great look. So, this is the tutorial for it.In earlier
i wrote a post about.How To Add
Multi-Color
Popular Posts Widget For Blogger. Actually it was a
color effect. But this tutorial helps you to customize
your popular post with Spinning hover style.It giving
great look to your blog. Its not too hard to add it to
your blog.Why don't you try it? just try this below steps
1. Log in to blogger account and Go to
Design >>
Edit HTML (make sure backup your template first)
2. Put checked marked in
Expand Widget Templates3.Find this code by using Ctrl+F
]]></b:skin>4. Paste below code Before
]]></b:skin> code
#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. Again Now
Find this code by using Ctrl+F
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>6. After you found, scroll below until you see this code
</b:widget>7. Now delete it start to end.
8. After delete is place below code in same place
<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"'>
<!-- (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 == "false"'>
<!-- (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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjezAeN0EF1ntH9r8S7kD53HIRBs899I-qs9ubxnBxi_EVkHSxmKLS4jPzXFM9rzu4loJP9vaF2igwsGYHOzbRvlYTzrn-qo5zpEwWblZRIX5R9_67OUyhBFT2HVOpjbgBvioMydybsxck/s1600/helperblogger-default-image.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>
9. Now save your template. You are done.
