Add the Best Related Posts Widget to your blog

We all want to keep our visitors engaged in our blog for longer time. And widgets play a vital role in keeping our visitors revolving around our blog longer. Related posts widget nowadays has became very crucial in helping us keep the visitor in the site for longer time. So it is our duty to make it more attractive and stylish.

So here i am sharing an amazing eye catchy related post widget. This new related posts widgets is stylish with lager thumbnails and a smooth hover effect to make it look cool. In addition to the fact that it displays the most accurate related articles in the list, this related posts widget is supported by all of the browsers.

Follow the below simple steps to implement this in your blog. The steps are simple and i believe you wont face any trouble adding the widget. However, if you face any difficulty in installing the widget in your blog don't hesitate to leave a comment.

Recommended Posts

    • Multi Coloured Random Posts Widget
    • Recent Posts Widget
    • New Recent Comments Widget

Adding This Widget to your Blog

► Navigate to Blogger dashboard > templates and click on edit html
note: don’t forget to backup your template before editing

► Search for </head> and just above it paste the below code

<!--BLOGGSLAB.com 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/AVvXsEiEdiGE80B0eHv0jQIQtA5n8sRBnzEM4ZKTdQeNZ-_eVAjyvpmkjWP79Ph2KlpXH65LE9thXHvAbgYzONhL_yevvPkMo9ElcsQhqg6qvi1f3vP5PTNPbUh2j6CtuAl6KbJVRVbSA6Ldqn6W/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>
<!--BLOGGSLAB.com Related Posts with thumbnails Scripts and Styles End—>

► Now search for <data:post.body/> and just below it paste the below code.

---

EXTRA NOTE : Please note that there maybe multiple <data:post.body/> in your template. You have to try placing the below code on each one of them at a time. The code will work perfectly only if you place the below code after the correct <data:post.body/>

---

<!--Bloggsalb.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();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End—>

►  That’s it. Save changes made to your template.

Customizations
► change the number of related articles appearing by changing the value 3 in var maxresults=3;