Add Related Posts With Thumbnails Below Blogger Posts?

related posts with thumbnails for blogger

Related posts is useful to show the others posts related to the present open post page.Suppose, you are publishing a faceebook post when the visitor open this post he also can see the related posts of facebook at the end of post.Today related posts become the alternative to every bloggers post.You can add this related posts with thumbnails of your posts.Follow below tutorial to add this related posts widget to your blogger.

Part1

1.Log in To Blogger account.
2.Back up Template.
3.Template- >> Edit Html
4.Search the </head> using ctrl+f shortcut key.
5.Add below code above </head>

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {float:center;text-transform:none;height:100%;min-height:100%;margin-top:10px;padding-top:5px;padding-bottom:5px}
#related-posts h2{font-size:12px;color:#000;font-weight:400;margin-bottom:0.4em;margin-top:0em;padding-top:0em}
#related-posts a{color:#000;text-align:center}
#related-posts a:hover{color:#FFF;text-shadow:0 0 1px #222;text-align:center}
#related-posts a:hover{background-color:#222;border:none}
</style>
<script type='text/javascript'>
//<![CDATA[
//Script by Aneesh of www.bloggerplugins.org
//Released on August 19th August 2009
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.media$thumbnail.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]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU6aeNisB-EmQtLp-iV6u4p1Af34P1n46V0mkKi6ByvoqVMp5Z8EXHtyA3kWTKmBwf5vtDlI-E5qqGexUXUwKLMtvLQ74JFiGO0JSYXjHW3VB5baR6N6SUkd-XtzOQMqWYEFeU1O-Dyhg/s400/noimage.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('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border:none"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:100px;height:85px;border:2px outset #EAEAEA" src="'+thumburl[r]+'"/><br/><div style="width:90px;padding-left:10px;height:25px;border:none;margin:3px 0px 0px;padding-top:5px;font-style:normal;font-variant:normal;font-weight:normal;font-size:11px;line-height:normal;font-size-adjust:none;font-stretch:normal;">'+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>

6.Save Template.

Part2

1.Now Tick at Expand Widgets.
2.Search for the any one of following code

<div class='post-footer-line post-footer-line-1'>
(or)
<p class='post-footer-line post-footer-line-1'>

3.paste below code before at any one of the above codes

<b:if cond='data:blog.pageType == "item"'>

<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=10"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=8;
var relatedpoststitle="<b>Related Posts :</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

4.Save Template.

Pages