Widget: How to add Related post to blogger with Thumbnails

Add Related post widget to blogger blog

Nowadays, hardly can you see a blog without a related post widget displayed below their posts, unless, if or maybe the blog is new, that is to say you must have a new blog for you to be reading this post right now, if you ain't, then what the heck have you being doing?

Anyway, you are all welcome here whether you are new to blogging or you are a pro.

Related posts add certain benefits to your blog, as a matter of fact, lots of benefits, the most important is to increase your site pageviews and also make you blog fun for your readers, without much talks/write-ups, let get straight to steps to add this related post widget to your BLOGGER/BLOGSPOT blog.

Steps to add related post To Blogger

1. Open your blogger, locate template and click on Edit HTML button as indicated in the photo below.

Note: it very advisable to save a copy of your template in case you get it messed up in this process. please do so.

2. While the template is opened, click any point inside the code area and hit your CTRL+F Key in windows, CMD+F keys in Mac, this will pop out a search box.

Ctrl+F keys to pop out the search box

3. In the search box input this code </head> and hit your enter key
 this will take you to the tag position shaded with yellow. Looks like this </head>

<!--Related Posts with thumbnails Scripts and Styles 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]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxgcc1sMZxAsfzXQpTpsXgnYIEMFwqDST-A8g7mxUY77eKxLhW9hVJymXlfpPPVlSoSg0WNR2TGfE5HLy8WqUjvYfQLfKK89rrSfZaGvDW9B-Mzb_THiRM4q1i0TRGfdNltYekU1lU8cCD/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 Scripts and Styles End-->

4. Copy the code below and paste right above the </head> Tag

5. Use the search box again input the code below. Note: you might find the code more than once in your template go for the second one, that what we will be making use of
<div class='post-footer'>
6. Copy the code below and paste right above the <div class='post-footer'> tag

<!-- 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=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="https://blogwox.blogspot.com/2016/09/how-to-add-related-post-widget-blog-design.html" rel="nofollow" >Related Posts Widget</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

If you are unable to see this related post widget after saving template,  add the code (step 6) just above the </b:includable> tag which can be found above this line  <b:includable id='postQuickEdit' var='post'>  in your template.

Customization

You can change the number of post that appear in your related post by changing the 5 value, that Max results=5 to your preferred number, to easily locate this, use the search box in template and input this code
var maxresults=5;

To change the size of the thumbnails(width and Height) change the values which are 110px and 100px
input this in the search box
cover;width:110px;height:100px;