How to add cool related posts widget with Thumbnail to blogger blog

If you are looking for a cool related posts widget for blogger blog. Then this post is for you. Because  In this post, I will show you. How to add a cool related posts widget with Thumbnail to blogger blog. The related post I am going to give is really a stylish widget. You can easily add this widget to the blogger blog. Just follow our below steps to add a cool Related Posts widget to blogger blog.

Add cool related posts widget with Thumbnail to blogger blog.

1. Go to the blogger.com and log in your account.
2. Select your blog where you want to add Related posts widget.
3. From your blog dashboard click on the template option. 
4. Now click on the Edit HTML button. In the next page, you will see your template code.
5. Click anywhere on the code. And search </head> by pressing CTRL+F.
6. After finding the </head> paste the following code just before it.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/***** Related Psots Widget CSS*****/
#related-posts { display: inline-block; margin-top: 20px; padding: 40px 5%; text-align: center; width: 90%; }
#related-posts h3 { text-align: left; }
#related-posts ul { margin: 0; padding: 0; }
#related-posts ul li {display: inline-block; list-style: none; position: relative; padding: 15px; vertical-align: top; width: 33.33%; overflow: hidden; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
#related-posts ul li .rpwrap {box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; }
#related-posts li img {display: block; width: 100%; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; }
#related-posts li:hover img { transform: scale(1.1); }
#related-posts li .re-titles { bottom: 35%; color: #fff; left: 0; margin: 0 auto; padding: 0 10px; position: absolute; right: 0; }
#related-posts li .rpoverlay { background: rgba(0, 0, 0, 0.5); bottom: 0; opacity: 0; left: 0; position: absolute; right: 0; top: 0; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; }
#related-posts li:hover .rpoverlay { opacity: 1; }
#related-posts li .rpoverlay:hover { color: #fff; }
</style>
<script type='text/javascript'>
//<![CDATA[
var ry='<h3 class="related-post-title"><span>Related Posts</span></h3></br>';rn='<h3 class="related-post-title"><span>No related Posts Available</span></h3>';rcomment='comments';rdisable='disable comments';commentYN='yes';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7TfCm4qGxwN7b_wvWCPXBlG_aaRt01zHh_s7YB8G43hTsVD-Mw7918Y4S0K_al7WU3LrYteEcGNpjGfqjQOPGNBZMUEh_WF903C-YyRGRwbPiuDm_PCDSK40R23Bmxz_zOslrnyZNpnM/s1600/no-image.png'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><div class="rpwrap"><img alt="'+titles[c]+'" src="'+ thumb[c].replace("/s72-c/","/s300-c/")+'"/><a class="rpoverlay" href="'+urls[c]+'"><span class="re-titles">'+titles[c]+'</span></a><div class="clear"></div></div></li></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]>
</script>
</b:if>

Now search the following code. 

<div class='post-footer-line post-footer-line-3'/>

After finding the code just paste the following code after it. Related Posts widget is successfully added to your blogger blog.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>
</b:if>

Now visit your blog and see is it working or not. Note: it will only work if your all posts have a label. Otherwise, it displays a message that No related Posts are available.
Thanks for reading my this post. Keep Visiting for more useful posts. If you have any question about this post. You can ask me by dropping your comment below.