How To Add Related Posts With Thumbnails in Blogger

How about adding Related Posts below your blog posts? Advantage of adding Related Posts below your blog post is that your readers may find some of your Related Posts interesting and click on the link to read the post, thus your readers stay time on your blog increases and thereby increases your pageviews. So this tutorial will help you to add Related Posts below your blog posts.

Steps Of  Adding Related Posts Below Blog Posts In Blogger:

Step 1. Go To Blogger Dashboard >> Template >>Edit HTML;

Step 2. Check the “Expand widgets template” box;

Step 3. Search CTRL + F for this piece of code: </head>

Step 4. Copy and paste the below code just above </head> Code

<!--Related Posts with thumbnails Scripts by MukeshMali.com and Styles Start-->
#related-posts{float:left;width:auto}
#related-posts h1{background:none;color:#333;font-weight:700;font:24px Trebuchet MS,sans-serif;margin:0;padding:3px}
#related-posts .MM_img{width:161px;height:110px;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out;padding:3px 5px}
#related-posts .MM_img:hover{opacity:0.5;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}
#related-posts .play-button{background:url(https://lh4.googleusercontent.com/-Liprsvdg5j4/URvA_sD-sUI/AAAAAAAACpw/WTbEtnP_qjY/h120/MukeshMali.png) no-repeat center;cursor:pointer}
<!--Related Posts with thumbnails Scripts and Styles End-->
<!-- /Start javascript for Related Posts -->
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Arrayundefined);var relatedTitlesNum=0;var relatedUrls=new Arrayundefined);var thumburl=new Arrayundefined);function related_results_labels_thumbsundefinedjson){forundefinedvar 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}catchundefinederror) {s=entry.content.$t;a=s.indexOfundefined"<img");b=s.indexOfundefined"src=\"",a);c=s.indexOfundefined"\"",b+5);d=s.substrundefinedb+5,c-b-5);ifundefinedundefineda!=-1)&&undefinedb!=-1)&&undefinedc!=-1)&&undefinedd!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://lh6.googleusercontent.com/-AWhPkAKPXYE/URvFDRyVrBI/AAAAAAAACqA/gH0lhjnqdGI/h120/MukeshMaliBig.png'} ifundefinedrelatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum]
.substringundefined0,35)+"..."; forundefinedvar k=0;k<entry.link.length;k++){ifundefinedentry.link[k].rel=='alternate') relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}} function removeRelatedDuplicates_thumbsundefined){var tmp=new Arrayundefined0);var tmp2=new Arrayundefined0);var tmp3=new Arrayundefined0);forundefinedvar i=0;i<relatedUrls.length;i++){ifundefined!contains_thumbsundefinedtmp,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_thumbsundefineda,e){forundefinedvar j=0;j<a.length;j++)ifundefineda[j]==e)return true;return false}function printRelatedLabels_thumbsundefined){forundefinedvar i=0;i<relatedUrls.length;i++){ifundefinedundefinedrelatedUrls[i]==currentposturl)||undefined!undefinedrelatedTitles[i]))){relatedUrls.spliceundefinedi,1);relatedTitles.spliceundefinedi,1);thumburl.spliceundefinedi,1);i--}}var r=Math.floorundefinedundefinedrelatedTitles.length-1)*Math.randomundefined));var i=0;ifundefinedrelatedTitles.length>0)document.writeundefined'<h1>'+relatedpoststitle+'</h1>');
document.writeundefined'<div style="clear: both;"/>');whileundefinedi<relatedTitles.length&&i<20&&i<maxresults){document.writeundefined'<a style="text-decoration:none;margin:0 10px 5px 0;float:left;border:solid 1px #ccc;');ifundefinedi!=0)document.writeundefined'border:solid 1px #ccc;"');else document.writeundefined'"');document.writeundefined' href="'+relatedUrls[r]+'"><div class="play-button"><img class="MM_img" src="'+thumburl[r]+'"/><br/></div><div style="width:160px;padding:0 5px;color:#222;height:40px;text-align:center;margin:0px 0px; font:14px PT Sans Narrow; line-height:16px;">'+relatedTitles[r]+'</div></a>');ifundefinedr<
relatedTitles.length-1){r++}else{r=0}i++}document.writeundefined'</div>');
relatedUrls.spliceundefined0,relatedUrls.length);thumburl.spliceundefined0,thumburl.length);
relatedTitles.spliceundefined0,relatedTitles.length)}
//]]> </script>
<!-- /End javascript for Related Posts -->

Step 5. Now find the following code: post-footer-line post-footer-line-1

Step 6. And just above it, copy and paste the below code:

<!-- 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>
<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=8&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot;Related Posts  :&quot;;
removeRelatedDuplicates_thumbsundefined);
printRelatedLabels_thumbsundefined);
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Step 7. Save the Template

Enjoy