Stylish Related post for blogger with hover effect v2

Hi readers !! Bounce rate is the biggest rival for your blog which can destroy all its ranking from sky to earth. Every blog owner want's that a visitor will spent some time and click some links too. So for that they need some quality widget, that can show some cool updates or related updates of your article to force the visitor to spent some time. And for that we have came up with another "Related Post Widget", Which will help you to reduce your blog's bounce rate. The widget will be placed at the bottom of your post and will show some most relevant suggest according to your post label. The widget looks very Stylish and elegant.It has very awesome opacity hover effect to catch a eye of the reader. So before starting the tutorial, See the demo at the bottom of our post.

Must see :- Stylish Related post for blogger with hover effect v1.

Features of this widget:-

• Unique and stylish.
• Large Thumbnail's.
• Opacity hover effect.
• Support All browsers.
• Display most matching articles.

How to install the widget:-

These  steps are so simple and easy that any new blogger will not face any kind of problem to install it in their blog.

• Go To Blogger.com >> Your Blog >> Template
• Now Backup your template.
• Then select Edit HTML >> Proceed
• Search for ]]></b:skin> and just below/under it paste the following code.

<!--alltipsotricks.blogspot.com-RelatedPostsStarts-->

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>

#related-posts h5{
font-size:22px;
text-transform: uppercase;
font-family: &#39;Trebuchet MS&#39;,arial,serif;
font-weight:bold;
text-shadow: 1px 1px 0 #F2F2F2, 1px 2px 0 #B1B1B2;
padding:10px 20px;
margin:0;
border-bottom:1px solid #cecece;
}
#related-posts {
float: left;
border: 1px solid #d2d2d2;
width: 100%;
}
  #related-posts img {
width: 175px!important;
box-shadow: 0 0 5px #D56540;
  }
 #related-posts a {
width: 175px!important;
color:#476CBB;
}
#related-posts a:hover {
color: #000;
text-decoration: underline;
}
#related-posts img:hover {
opacity: 0.8;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC82tSMl5dm_RZT84wChEdb2N38gw3Ajb5pNdPImBbbIKeezv9kPNlBYCzO_F4ukaD1Pu9q4tjKG181_h9qebELHyQo8pBt7QnGk7pviv4YnZfkiYFQQPXrtO3TW7h70IQ_m1mcAtnMwZu/s1600/no_image.jpg&quot;;
var maxresults=3;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Recommended For You::-&quot;;
</script>
<script src='https://googledrive.com/host/0B5td9UE6vZ75bnBMaGRXRHJaSlk' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End--> 

Now let’s add the final  part of the widget, Search for <data:post.body/> and just below/after it paste the following coding.

 <!--Skillblogger.com-Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=3&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs(http://www.webestools.com/page/images/uploads/web20Title_Wlstbeoose5681.png);
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End--><!--RELATED-POSTS-STOPS-->

All Done : Now everything is completed just  Save your Template by pressing Save template button.

Note: if you want to increase the number of results then just search for max-results=3 in the above code and change the value. 

From Team Skill Blogger:-

Hope you have enjoyed the cool and interesting session about Related Post Widget For Blogger. We are trying to create more widgets that benefits to you and your users. If you would face any problem to add this widget feel free to ask till then, blessings and Happy Relating.

Note: This widget is created by All Tips oTricks. Don't forgot to link back if you want to share this tutorial.otherwise dmca is waiting for some spammers and copiers.