Popular Post gadget allows you identify hottest post as part of your blog. And so, Blogger previously added thisthat features for every single blog. We can easily customize iswith good look. And so, this could be the tutorial for this. Actually it was acoloring effect. But this particular tutorialhelps you to customize the popular post with Spinning hover fashion. It presenting great check out your weblog. Its fairly simple to include it in order to
your weblog. Why now don't you try it? just try this below easy steps:
1. Login to blogger and go to template >> Edit HTML
2. Find the piece of code ]]></b:skin>.
3. Copy the below code and paste before this code ]]></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-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. Now find Below code.
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
6. After find this code start from this code and scroll down until you see this code </b:widget>.
Now replace the given code with this code.
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
..
..
..
..
..
..
..
</b:widget>.
<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/AVvXsEiIIbj6_YS48DKyNDJaJ5x4J8eG5qMob1WwZy76ELYPl3R_1pqu5ILDLt-jUqR68IyvRQ8yzY7bcjEoC92R0UhEIn5uA7YKhIQsOJid60RTMVJsUkjWbyM_eQopE4g_6O2Wzg_uVIo3YfM/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.
Well the question is usually a-raised by many new bloggers. Let me explain. Back-links include the links that comes from external pages, these links can also be called inbound hyperlinks. These links play an essential role in SEARCH ENGINE OPTIMIZATION, we could just say they're the soul of the blog or web page. The more you have high quality back-link to your blog the more you will definitely get high rank in SERP and have good PR reputation.
.png "Professional Notification Bar")
