How To Add Related Post Thumbnail Widget for Blogger

Many of my blog readers always ask me how to add related post thumbnail. So today for those I am posting the code of it. I hope other will also like who don't know about it. It look like on my blog as shown in below image.

  
If you're interested to put this widget on your site, please follow these steps:
Edit your template, Log in to your blogger dashboard - click on Design - Edit HTML and check the Expand Widget Templates. Find this code:

</head>

Now Add below code just above it

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {float:center;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}
#related-posts h2{font-size: 1.6em;font-weight: bold;color:#000;font-family:Arial, Georgia;margin-bottom:0.75em;margin-top: 0em;padding-top: 0em;}
#related-posts a{-webkit-transition: background 1s ease, color 1s ease;-moz-transition: background 1s ease, color 1s ease;-o-transition: background 1s ease, color 1s ease;}
#related-posts a:hover{background-color:#d4eaf2;-webkit-transition: background 1s ease, color 1s ease;-moz-transition:background 1s ease, color 1s ease;-o-transition:background 1s ease, color 1s ease;-webkit-border-radius: 5px;-moz-border-radius:5px;border-radius:5px;-o-border-radius:5px;}
.tooltip{width: 115px; color:#000;font:lighter 12px/1.3 Arial,sans-serif;text-decoration:none;text-align:left}
.tooltip span.top{padding:20px 5px 0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEpOSaOqosm-4Rml_d1ubvLRjMOhbgVqRClLTbSZm_lyT25aEvq9v4u3IzpoLNjHshUwLsM7HRsGg4wjMpcI4k8OkIHg17rrBn1SFoFAHoKJQXMJcK0FVxkhJ6d4HsZZYQ4lbadMzR884/s1600/bt.png) no-repeat top;}
.tooltip b.bottom{padding:2px 5px 6px;color:#548912;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEpOSaOqosm-4Rml_d1ubvLRjMOhbgVqRClLTbSZm_lyT25aEvq9v4u3IzpoLNjHshUwLsM7HRsGg4wjMpcI4k8OkIHg17rrBn1SFoFAHoKJQXMJcK0FVxkhJ6d4HsZZYQ4lbadMzR884/s1600/bt.png) no-repeat bottom;}
</style>
<script type='text/javascript'>window.onload=function(){enableTooltips("calcList")};imgBT=new Image();imgBT.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6ytO7rTasSsXbsJkuazzVeOD4gRipmNJ15YLORYZTlPHJ-orGuUqwZKucvZK6maBQy0QjjUCtBtZJk8D-P9TTcBxwN_yaNtjZcQSn67JnohaSw3-Re6ZGZllotfCpYccOW7w21uMoqkQ/s1600/noimage.jpg';</script>
<script src='http://dvslabs.googlecode.com/files/rp-bubbled-thumbnails.js' type='text/javascript'></script>
</b:if>

Next, Search for this:

post-footer-line post-footer-line-1

In which tag the this present, just place the below code after this:

<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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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=12&quot;' type='text/javascript'/></b:if></b:loop>
<h4>Related Posts</h4>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>

</div><div style='clear:both'/>
</b:if>

Save your template and you're done. You may set the maximum number of related posts up to 20 posts. You can also customize it if you have small knowledge of HTML.