How to add Related Posts Widget with thumbnails in Blogger

The “related posts” are chosen from other posts having in
the same category, label or tag. This readers live on your blog for ages when
they see interesting related posts.

3.
Click inside the HTML and press the “CTRL + F keys”

4.
Type or copy the below tag and paste
it inside the search box and hit Enter to locate it:

</Head>

5.
Now Copy the below highlighted code and paste it just above the </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 Arial;padding:3px;color: #000000;
text-transform:uppercase;}#related-posts
.related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:100px;height:90px;-webkit-border-radius:
5px;-moz-border-radius: 5px; border-radius: 5px; }
#related-title
{color: #0d0d0d;text-align:center;text-transform:capitalize;padding:
0px 5px 10px;font-size:10px;width:100px; height: 90px;}</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 Scripts and Styles End–>

• To change the size (width and height) of thumbnails, modify
  the 100 px and 90 px values in red
• To change the colour and size of related posts titles, you
  will have to alter the #0d0d0d color

6. Copy the below code and
paste in the HTML search box. Please note that the code will appears twice,
work with the second one:

<div class=’post-footer’>

7. Now copy and paste the
below code immediately above <div
class=’post-footer’>:

<!–
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 href=’http://www.tellforceblog.com/’ rel=’nofollow’
style=’font-size: 9px; text-decoration: none;’>TELL-FORCE
Blog</a></div></b:if><!–
Related Posts with Thumbnails Code End–>

Note: