Awesome Stylish Related Post Widget For Blogger

Friends today i m going to share with some important topic about blogger . Awesome Related Post Widget For Blogger.It is the most important part of the blogger if you want to get more page view .This is the one of simplest procedure to take most page views .When a user visit your site/blogger he is trying to find best widget etc.. for his blog . and if you have best content for blog and you add this blogger related posts with thumbnails .Then he i mean the user can get easy any content from you blogger because the related post widget will show it. and he select with out any difficulty .But remember this widget i mean blogger related posts with thumbnails is available in a lot of template. you can also select the most responsive SEO Friendy and Ads ready template from this site with Awesome Related Post Widget For Blogger .,

If you want to add some more stylish and beautiful widget to your blogger to make him more attractive
Like

You can pick from here without leaving this page 100% Workable and free .

Codes موقع صلة /Awesome Related Post Widget For Blogger

There are 2 tags (Html codes) which i m going to teach you that how can you add in your blogger template.
Now lets start
First of all
Login in to you blogger Dash board and
GO > Template ''Click"
Click on the ''Edit HTML''

This code Area will open

Press Ctrl + F '' Button form your keyboard for small search box . you can find easily any tag with the help of that search box . just copy the tag form here past in the search box and press Enter form keyboard the search will find-out in maximum in a second.
Now How can you add blogger related post widget bellow the blog posts.

Now easy steps to Add Blogger Related Posts Plugin With Thumbnails

So I m going to show you 3 Steps

Step # 1
Step # 2
Step # 3
Step # 4

Follow it and easy add this widget to your blogger. If you face any type of problem related with post then you can take help form us . and that will very gladness for us to do your task Thank you.

Step # 1
Copy this tag and past it in search box and find it after find paste below code upper/Before this tag
I mean past above form this tag and then

Tag 1

</head>

Step # 2

Copy all the code and past it above </head> as i show upper in photo.
Code # 1

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

Step # 3

After pasting the above code now find this tag
Copy this tag and past n search box and find it after finding copy the below code

Step # 4

Copy Below code after finding div class='comments' id='comments and past the code Above/upper /before the tag as i shown in upper photo
But remember past the code twice i mean two time div class='comments' id='comments upper this tag.

Copy all code

Code # 2

<b:if cond='data:blog.pageType == "item"'>
<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>

and then click on Save template .

Now you are done now check you Blogger related posts with thumbnails this will appear below the post . Like this related post will appear as i given in below photo.