How to show related posts in blogger with thumbnail view

In this post we are going to show you people hot to show related or relevant posts in your blog (Google blogger) with thumbnail view. I tried my best to make it simple and easy so you can easily add make this changes in your blogger and show related posts to your users.

First we will see how this will appear on your blog. below is the screen shot of its appearance.

Related content thumbnail view

Now lets start to achieve this and without and delay show the relevant posts to your users so they can easily find the relevant content and also it will make your site more visible in terms of impression.

Step 1: login into Blogger account and select the TEMPLATE option from the left side of menu.

Step 2: On right panel a preview of your blog will appear showing the CUSTOMIZE and EDIT HTML option. Go with EDIT HTML option.

Step 3: A new coding snippet window will appear. Click inside the code window and then go to find option by press Ctrl+F. 

Step 4: Search for the text </head>.

Step 5: Copy paste the below code above the tag </head>.

<!--Show related posts in blogger START--><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'>

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/AVvXsEhMXVhMAH4S67GdSpI7ljQePwVrtxrEwf6DYmQDOh-7AeDNEt_HyREAzEdwnADxo8J_r2ZAcQsrsnk22Hlz3zPW-5U8ckl1MFmXSPPEEYCa5zsuH88CblzRCnAdRzeTFnK0UQ3Pl8Tg_xz6/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>

<!--Show related posts in blogger END-->

Step 6: Again search for the text <div class='post-footer'> and add the below mentioned code before this tag.

<!--Show related posts in blogger START-->

<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://rashidjorvee.blogspot.in/2017/11/how-to-show-related-posts-in-your.html" rel="nofollow" >Grab this Widget</a></div>

<!--Show related posts in blogger END-->

Step 7: Code changes has been completed now you save your template from above SAVE TEMPLATE button.

Note: Go for your site and verify the changes and see how many related posts are appearing in your blog.

If you would like to change the number of related posts and its thumbnail view then go to step 6 and change the value for maxresults=5 to number which you wants.

If you face any issue while implementing this change in your blog, please comment your queries, we will definitely help you.