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.
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXtQ9nMzy7YLAFreDYwJw_MjRlHqqUGClOnE5cXwbwT9imrMeWKJ-j98JxjcSHBkbJFH62ixST_r2L3Vy_cpr0bVkyoWquGg2NUnZnvCa1KnQlA_Yr1E7NEtwj00boSOueqvw_mxLWQSk/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuqQB5fBA3OKND-tizBmy8aD_8SEkZ-3ttRTfTkMoEkEt3YdDGGo4XW4xSzHhyphenhyphenK6_SIjdP23rdNJUoB0YsA2oQJQwKINWAFYhn6Y8PBzHnN1szJ4_6arZnw7g9-3Y2OMSBxWj5acnyMQY/s400/noimage.png"; var maxresults=8; var splittercolor="#d4eaf2"; var relatedpoststitle="Related Posts"; </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]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuqQB5fBA3OKND-tizBmy8aD_8SEkZ-3ttRTfTkMoEkEt3YdDGGo4XW4xSzHhyphenhyphenK6_SIjdP23rdNJUoB0YsA2oQJQwKINWAFYhn6Y8PBzHnN1szJ4_6arZnw7g9-3Y2OMSBxWj5acnyMQY/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 == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=9"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </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 == "item"'> and the </b:if> from the HTML part.
The script was written by Aneesh and I have designed the CSS.
The images in the related post widget are of very low quality. Any fix for this ?
ReplyDeleteThe 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.
ReplyDeleteSo 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
ohh man this is not working on my blog http://deshibit.blogspot.com/
ReplyDeletei don't know why, but none of your tutorial work on my 4 blogs, This is also not working :(
ReplyDeleteOkay, this one should really work. I have found three blogs giving me 60+ visitors each per day using this widget. Check a demo
ReplyDeletehttp://labmanual.blogspot.com/2011/04/asynchronous-decade-counter.html
This comment has been removed by a blog administrator.
ReplyDeleteNot working on mine..:-(
ReplyDeleteplease help.. I like this widget but it's not working..
ReplyDeletePlease see my blog..http://www.lifebeyondlimits.info/
-jayryan09-
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?
ReplyDeleteAfter I saved the template sir there is no related post shown.
ReplyDeleteJust like no changes..
Nothing will happened sir.. No changes..
Is it okay sir ill send my XML to you and you will be the one to make it for me?
ReplyDeleteI am unable to find related post tag in your blog. Please paste it to let me check it.
ReplyDeleteYou can also mail me your XML template, I will check if I can manage some free time.
What is your email? I send my .XML format..
ReplyDeleteIf you have a time you can add this widget for me..
Thank you so much..:-)
I did everything just as you instructed but the widget is not showing on my blog
ReplyDeleteYou may then like to look at the original dev's tutorial from
ReplyDeletehttp://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
thanks for the nice words! i loved your blog too.. nice implementation of blogger tricks.. :)
ReplyDeleteMy blog
Thanks you!! Woking 100%!!!
ReplyDelete