Awesome Related Post Widget for Blogger

In BTNT, I've already published few related post widget in the past, It's been a while since I've published a new related post widget. Today I've designed a advanced related post widget using CSS3. It is designed on the focus of matching the Ravia theme but it can be used on any other templates, as the design can blend with other templates also.

Previously Published Related post widgets:-

• Related Posts widget for blogger (based on Labels)
• Stylish Related Posts For Blogger Blogs
• New Stylish Related Posts For Blogger Blogs updated 2011

Check out the Live demo for better understanding.

Demo

Live Demo

How To Add Related Post widget for blogger

Note:- Please create a back up of your template before you install this widget. To do this, navigate to "Template" and make a backup of your template by clicking on the "Backup/Restore" link at the top. Once the back up is over, follow these steps carefully.

1. On the Blogger Dashboard Go to Template > Edit HTML Button
2. Click inside the HTML Editor, Press CTRL+F (This will open a search form on the top right side of the HTML Editor)
3. Now search for </head>
4. Above that place the following code.
   

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <style type='text/css'>
   /***** Related Psots *****/
   #btnt-related-posts { display: inline-block; margin-top: 20px; padding: 40px 5%; text-align: center; width: 90%; }
   #btnt-related-posts h3 { text-align: left; }
   #btnt-related-posts ul { margin: 0; padding: 0; }
   #btnt-related-posts ul li { border-radius: 50%; 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; }
   #btnt-related-posts ul li .rpwrap { border-radius: 50%; box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; }
   #btnt-related-posts li img { border-radius: 50%; 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; }
   #btnt-related-posts li:hover img { transform: scale(1.1); }
   #btnt-related-posts li .re-titles { bottom: 35%; color: #fff; left: 0; margin: 0 auto; padding: 0 10px; position: absolute; right: 0; }
   #btnt-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; } 
   #btnt-related-posts li:hover .rpoverlay { opacity: 1; }
   #btnt-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 article 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/AVvXsEjCOIY1YgVpGrGf5j4Gtm9ekOLoGuJLoidCzGh870zwJ8iLxEEp0dt-0IsTGAnfWfRTjf_CvzYZiKhzAz3Xi_1Wsa2XwmnoeIpbulSUxzdpGpjiOYT0FpMESx0J62nbEXuBIhEbNRIp5XpS/s1600/BS+No+Image.gif '};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('btnt-related-posts').innerHTML=dw};
   //]]>
   </script>
   </b:if>

5. After that search for any one of the following codes.
   

   <div class='post-footer'>
                 (or)
   <div class='post-footer-line post-footer-line-1'/>
                (or)
   <div class='post-footer-line post-footer-line-2'/>
                (or)
   <div class='post-footer-line post-footer-line-3'/>

6. After finding any one of the above code, Paste the following code after it.
   Note:- If you're using Ravia theme (Which is shown in the demo) search for <div class='post-footer-line post-footer-line-2'/> code and place the following code after it.
   

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div id='btnt-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>

7. Now save your template. That's All. ;)

Kindly Let me know your feedback about this theme in comments and please Share it with your friends. ;)