Let’s Add A Custom Related Post Widget With Thumbnail In Blogger

R elated posts are a great way to attract your visitor to explore your site further more. It doesn’t matter how well you have designed your ...

sshot-2

Related posts are a great way to attract your visitor to explore your site further more. It doesn’t matter how well you have designed your site to make it easy to navigate, but there are certain visitors who will spend only a few time on your site and then leave immediately. The best way to keep this visitors on track is to show them something they might feel interesting. Then what could be more accurate then showing his some of your similar articles? For example, everyday I got many visitor from Google search result. But most of them are not equally interested in all of my article. If I can give him the thing he is looking for, then he might like to check my site again later. That’s why a related post option is so important.

Previously I have shared a way to add related post on your blogger blog. But it was only link list. No thumbnail were generated there. But I think showing a thumbnail can bring you some more visits. This is the way to do it. The script I am using here is written by Aneesh. I am too using this widget. Click here to check the demo. I am dividing the whole process in three terms - CSS Part, Java-Script Switch and HTML Placement. So let me show you how to add this option to blogger.

Related Post Widget With Thumbnail For Blogger

1st log in to your blogger account and then navigate to “Design > Edit HTML”. Then BACKUP YOUR TEMPLATE.

CSS Part

We will have to add a new div block. Let give the block an ID “Related-Post”. To place this CSS, 1st search for the ]]></b:skin> tag and replace that with the following code.

#related-posts {
float : left;
width : 640px;
background : #fff;
border:1px solid #cecece;
-moz-box-shadow: 0px 0px 5px #BBB; 
-webkit-box-shadow: 0px 0px 5px #BBB; 
box-shadow: 0px 0px 5px #BBB; 
margin : 20px 0 20px;
padding: 5px;
}
#related-posts h2{
font-weight : normal;
color : #111;
font-family : "Nobile", "Helvetica Neue", Arial, Helvetica, sans-serif;
font-style : normal;
font-size:22px;
line-height: 24px;
padding:10px 10px;
margin:0;
background:url(http://4.bp.blogspot.com/-v9PtPK2sdwY/TmpM5_CkiHI/AAAAAAAADsY/jhJ-2Oits_8/s1600/imgbg.png) repeat scroll 0 0 transparent;
border-bottom:1px solid #cecece;
}
#related-posts a {
border:0;
outline:0;
color : #000;
background:none;
margin:0;
padding:0;
border:1px solid #fff!important;
font-style: normal; font-variant: normal; font-weight: normal; font-size: 10px; line-height: normal; font-size-adjust: none; font-stretch: normal;
}
#related-posts a:hover {
background:#F2F2F5;
border:1px solid #CCC!important;
color:#000;
text-decoration:underline;
}
]]></b:skin>

Java-Script Switch

Related post widget is completely based on Java-Script. We need to paste it before closing the <head> tag, So search for </head> and replace it with the following code.

<script type='text/javascript'> 
var defaultnoimage=&quot;http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png&quot;;
var maxresults=8;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script> 
<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 {if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";}

}

if(relatedTitles[relatedTitlesNum].length>42) 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(current) {
var splitbarcolor;
if(typeof(splittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#d4eaf2";
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==current)||(!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-left:solid 0.5px '+splitbarcolor+';"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:125px;height:125px;padding:0;border:solid 1px #eaeaea;margin-left:10px;" src="'+thumburl[r]+'"/><br/><div style="width:125px;padding-left:10px;height:35px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; 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>');

i++;


if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}

}
document.write('</div>');

relatedUrls.splice(0,relatedUrls.length);
thumburl.splice(0,thumburl.length);
relatedTitles.splice(0,relatedTitles.length);

}









//]]>
</script>
</head>

HTML Placement

Now save the template. Then check the “Expand Widget Templates” option. You need to decide where you are going to place the related post widget. I prefer using it on post-footer-line-2. So search for  <div class='post-footer-line post-footer-line-2'> then paste the following code immediately below it.

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

Customization

You can stop at this moment. Related post widget should be displayed below all posts in the post pages. But if you want to customize it, you can follow more.

To change the style (the way Related post widget will be displayed to your visitors, then change the CSS part,

To control the number of maximum related post to be displayed, simply find the code var maxresults=8; from the Java-Script part and replace 8 with the number you want.

To show the widget everywhere (including homepage and archive, remove the <b:if cond='data:blog.pageType == &quot;item&quot;'>  and the </b:if> from the HTML part.

The script was written by Aneesh and I have designed the CSS.

17 comments :

  1. The images in the related post widget are of very low quality. Any fix for this ?

    ReplyDelete
  2. The default size of thumbnail in Blogger is 72px cropped. You have to use an external js to edit the default value. But it is not recommended. And also not works too.
    So i am afraid you have to use other script or third party tool (outbrain or linkwithin is better)

    or try http://www.jasica.in/2011/04/bigger-thumbnails-in-related-posts-with.html

    ReplyDelete
  3. ohh man this is not working on my blog http://deshibit.blogspot.com/

    ReplyDelete
  4. i don't know why, but none of your tutorial work on my 4 blogs, This is also not working :(

    ReplyDelete
  5. Okay, this one should really work. I have found three blogs giving me 60+ visitors each per day using this widget. Check a demo 
    http://labmanual.blogspot.com/2011/04/asynchronous-decade-counter.html

    ReplyDelete
  6. This comment has been removed by a blog administrator.

    ReplyDelete
  7.  please help.. I like this widget but it's not working..
    Please see my blog..http://www.lifebeyondlimits.info/

    -jayryan09-

    ReplyDelete
  8. If you describe the problem then I might try to look into it. Does your templates give any error while/after pasting and saving the code?

    ReplyDelete
  9. After I saved the template sir there is no related post shown.
    Just like no changes..
    Nothing will happened sir.. No changes..

    ReplyDelete
  10.  Is it okay sir ill send my XML to you and you will be the one to make it for me?

    ReplyDelete
  11. I am unable to find related post tag in your blog. Please paste it to let me check it.

    You can also mail me your XML template, I will check if I can manage some free time.

    ReplyDelete
  12.  What is your email? I send my .XML format..
    If you have a time you can add this widget for me..

    Thank you so much..:-)

    ReplyDelete
  13. I did everything just as you instructed but the widget is not showing on my blog

    ReplyDelete
  14. You may then like to look at the original dev's tutorial from
    http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html.


    Also, you may like to use nRelate plugin as an alternative to this related post widget which I am using on this blog now.


    Thanks

    ReplyDelete
  15. thanks for the nice words! i loved your blog too.. nice implementation of blogger tricks.. :)

    My blog

    ReplyDelete