Adding Related Post Widget To Blogger

Add the Related Posts Widget to Blogger Step by Step guide.

Step 1: Go to your Blogger account and then go to Template, Edit HTML

    

Step 2: Click in the code area then Press CTR+F.

Step 3. Search this tag inside the search box and press enter to find:

Selectable Text Below

</head>

Step 4. Copy below code and pase before/above the </head> tag:

Selectable text below.

<!--Related Posts with thumbnails Start--><b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>#related-posts{float:left;width:auto;}#related-posts a{border-right: 1px dotted #eaeaea;}#related-posts h4{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; }#related-title {color:#333;text-align:center;text-transform:capitalize;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}</style><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.gform_foot.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 thumburl[relatedTitlesNum]='http://2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s1600/no-thumbnail.png'}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(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(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('<h4>'+relatedpoststitle+'</h4>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}//]]></script></b:if><!--Related Posts with thumbnails End-->

 Remember: 
You can modify the width and height of thumbnails, like 110px and 100px value in blue while colour in green.

 Step 5. Now search the code below. this code you will find twice and you have to past the required code just above the second one:

Selectable text

<div class='post-footer>

Step 6: Paste the code below just above <div class='post-footer>

Selectable text 

<!-- Related Posts 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=5&quot;' type='text/javascript'/></b:loop><script type='text/javascript'>var currentposturl=&quot;<data:post.url/>&quot;;var maxresults=5;var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs();</script></div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a  style="font-size: 9px; text-decoration: none;" href="http://icanhelphere.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html" rel="nofollow" >Related Posts Widget</a></div></b:if><!-- Related Posts Code End-->

Remember:
You can change the 5 value from max-results=5 with the number of posts you want to be displayed
 and if you want the related posts to be displayed on homepage too, then remove the b:if lines in blue.

 If you still are unable to see the related posts widget after applying  the template, add the code (step 5) just above the </b:includable> tag that you can find above this line:

Example:

Screenshot below;

Save the Template and that's it. Now enjoy Related post widget with Thumbnails must appear below each post that has same labels on it.