Related posts are a great addition to you blog which can earn you a lot of benefits, some of the major benefits which you can have once the “Related posts for blogger blogs” is added to your own blog are below:

1. The bounce rate of the website will be reduced.
2. You will get more page views for your amazing content published at the blog.
3. Users will find it easy to find the things of their own interest.
4. Related posts are a good way of content promotion and keeping user engaged.

This is not a mere widget with related posts instead it has also the thumbnail feature as well which will add a thumbnail of the specific post being called in the related posts for blogger widget. Thus, the user will be attracted to the beauty of your content at once.

Adding Related Posts for Blogger Blogs with thumbnail Support:

The following are the easy steps to use this related posts widget for your blog and once done, the related posts will start to appear under your article page.

1- Adding the Javascript to call the related posts in blogger:

I’ll prefer some inline javascript in this case, but if you want to hotlink the javascript in your blogger template then you can do so at your own wish since that is also a good practise. (Make a backup of your blogger blog template) Edit your blogger template and then add the following code just below the closing “</head>” tag. In the below code the “var maxresults=5;” controls the number of posts to be shown in related posts widget.

<!-- Related posts for blogger blogs javascript code www.talkofweb.com #blogger -->
<script type='text/javascript'>
var defaultnoimage=&quot;http://4.bp.blogspot.com/-c7Arpj9JfrM/UfgfRos_71I/AAAAAAAABws/xTWNzdi8_OY/s1600/No+imag.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try 
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
catch (error){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))
{thumburl[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="http://4.bp.blogspot.com/-c7Arpj9JfrM/UfgfRos_71I/AAAAAAAABws/xTWNzdi8_OY/s1600/No+imag.jpg";}}
if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
}}}}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);var tmp2 = new Array(0);var tmp3 = new Array(0);for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i])){
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];}}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;}
function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels_thumbs(current) {
var splitbarcolor;
if(typeof(splittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#DDDDDD";
for(var i = 0; i < relatedUrls.length; i++){
if((relatedUrls[i]==current)||(!relatedTitles[i])){
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
i--;
}}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0px '+splitbarcolor+';"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img src="'+thumburl[r]+'"/><br/><div style="width:72px;padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');
i++;
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}}
document.write('</div>');
relatedUrls.splice(0,relatedUrls.length);
thumburl.splice(0,thumburl.length);
relatedTitles.splice(0,relatedTitles.length);}
//]]>
</script>
<!-- Related posts for blogger blogs javascript code www.talkofweb.com #blogger -->

After you have added the above code, hit save template. And now test that is everything working fine in your blog. Now move on.

2- Adding the code of related posts for blogger markup and style (CSS) at the right place i-e at the end of the article:

It’s time to add the code for related posts for blogger at the right place i-e just at the end of the article so that the visitor may read other related articles as well. Now, find while editing the blogger template press ctrl+F and find for the piece of line with code: “post-footer-line-1” just below that add the following code (or you can also find “data:post.body” and can add the code below that!):

<!-- Related Posts For Blogger - Talkofweb.com #blogger -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <style type='text/css'>
  #related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}
  #related-posts a{color:#5D5D5D;-webkit-transition: all 0.5s ;-moz-transition: all 0.5s ;-ms-transition: all 0.5s ;-o-transition: all 0.5s;transition: all 0.5s ;}
  #related-posts a:hover img {-moz-box-shadow: 0px 0px 7px #000000;-webkit-box-shadow: 0px 0px 7px #000000;\box-shadow: 0px 0px 7px #000000;-webkit-transition: all 0.5s ;-moz-transition: all 0.5s ;-ms-transition: all 0.5s ;-o-transition: all 0.5s ;transition: all 0.5s ;}
  #related-posts img {width:100px;height:100px;border:0px;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;-webkit-transition: all 0.5s ;-moz-transition: all 0.5s ;-ms-transition: all 0.5s ;-o-transition: all 0.5s ;transition: all 0.5s ;}
  #related-posts a:hover{color:black;-webkit-transition: all 0.5s ;-moz-transition: all 0.5s ;-ms-transition: all 0.5s ;-o-transition: all 0.5s ;transition: all 0.5s ;background-color:#EDEDEF;}
  </style>
<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=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
<a style="display: block; float: right;" href="https://www.talkofweb.com/how-to-show-related-posts-for-blogger-blogs-hover-transition/" rel="nofollow">Grab this related post Widget!</a>
</div>
</b:if>
<!-- Related Posts For Blogger - Talkofweb.com #blogger -->

In some templates, there occurs twice the “post-footer-line-1” so if on adding the above code below the first “post-footer-line-1” doesn’t makes it work then try adding the above code just below the second “post-footer-line-1” and now this time it will appear in a computer browser easily. You can also add the above code anywhere to make the related posts appear at the article page of blogger’s blog. All the styling had been done in the CSS for this related posts widget for blogger.

Update: Make Image of Related Post Transparent Upon Mouse Over:

One of a regular reader asked me a way to make the image/thumbnail of related post transparent upon hover. So I updated the CSS part, and the updated code is as follows (You’ll add the javascript part as usual but you’ll replace the second part with this one below):

<!-- Related Posts For Blogger - Talkofweb.com #blogger -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <style type='text/css'>
  #related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}
  #related-posts a{color:#5D5D5D;-webkit-transition: all 0.5s ;-moz-transition: all 0.5s ;-ms-transition: all 0.5s ;-o-transition: all 0.5s;transition: all 0.5s ;}
  #related-posts a:hover img {opacity:0.5;-moz-box-shadow: 0px 0px 7px #000000;-webkit-box-shadow: 0px 0px 7px #000000;\box-shadow: 0px 0px 7px #000000;-webkit-transition: all 0.5s ;-moz-transition: all 0.5s ;-ms-transition: all 0.5s ;-o-transition: all 0.5s ;transition: all 0.5s ;}
  #related-posts img {width:100px;height:100px;border:0px;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;-webkit-transition: all 0.5s ;-moz-transition: all 0.5s ;-ms-transition: all 0.5s ;-o-transition: all 0.5s ;transition: all 0.5s ;}
  #related-posts a:hover{color:black;-webkit-transition: all 0.5s ;-moz-transition: all 0.5s ;-ms-transition: all 0.5s ;-o-transition: all 0.5s ;transition: all 0.5s ;background-color:#EDEDEF;}
  </style>
<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=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
<a style="display: block; float: right;" href="https://www.talkofweb.com/how-to-show-related-posts-for-blogger-blogs-hover-transition/" rel="nofollow">Grab this related post Widget!</a>
</div>
</b:if>
<!-- Related Posts For Blogger - Talkofweb.com #blogger -->