Awesome Related Post Widget for Blogger

Hello and Welcome to GetWebInfo.Com. Here on this post i will share with you guys another Blogger Beautiful and Awesome Related Post Widget for Blogger. I Have already publish Realted post widget for blogger but this is also a really greate widget and work 100% to your blogger. I Hope this article is really helpful to improve your blogger website accuracy and also make your bloge bounce rate high.



Install This Awesome Related Post Widget for Blogger



Step 01: First of All Login To your Blogger Bloge

Step 02: On the Blogger Dashboard Go to Template> Edit HTML Button

Step 03: Click inside the HTML Editor, Press CTRL+F 

Step 04: Now Search for </head>

Step 05: Above this tage just paste 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]='http://3.bp.blogspot.com/-ZRo8fwgs65M/UZC2jMJpcLI/AAAAAAAAC5Y/EfoFQsr1wzU/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>

Step 06: After this 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'/>


Step 07: When you find out any one of the following code just Paste the below 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>

Finally Save your Blogger Template and You can All Done.

I Hope this Article is really helpful for you. If you like this Article so please share it on social Media with Your Friends. Thanks for Reading!!!!!!

Hello and Welcome to GetWebinfo.com. Here on this site you can be able to find out Latest Articles are about Blogger, SEO, AdSense, WordPress,. You can also be able to find out Latest Tips that can you really need one. You can also Download Premium themes free from this site.