We have been moved to http://www.bloganol.com/

In the Lists of Blogger hacks we have added a new and Important Blogger Hack Created by Blogger accessories to show Related Posts below each Post in Blogger blogs.This hack helps to generate internal blog Traffic and more page Views.


There are Altogether three methods for showing Related posts below each post in Blogger.Among them I am going to do is Method no 3 which is the easiest and More reliable.To Learn to show related posts in Blogger Follow the simple Steps below.

Before you start any Blogger Hack Please Backup your Blogger Template

First of all Goto Blogger Edit Html Page,Expand Widget Templates and Paste the Following Code just above </head> in your blogger Template.



<style>

#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://i263.photobucket.com/albums/ii150/mohamedrias/newconcept_bullet.png") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

Now in second Step Search for <p><data:post.body/></p> and Replace it with the Following Code.



<p><data:post.body/></p>
<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<h2>Other Recommended Posts on <b:loop values='data:post.labels' var='label'><data:label.name/><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&max-results=5"' type='text/javascript'/></b:if></b:loop> </h2>

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>

</div></b:if>

After you Complete the above steps Save your blogger Template and see the hack working.

comments

17 Responses to "A blogger hack to show related Posts below Each blogger Posts"
Anonymous said...
September 21, 2008 at 2:16 PM

hemmm,nice hack...
i'll try...
Thanks


Anonymous said...
September 22, 2008 at 8:01 AM

I just tried this hack and it' didn't work... It said it can't be parsed...


Anonymous said...
September 22, 2008 at 10:48 PM

Thanks, Deinesh...

I already tried your suggested code and it now works perfectly...


Doug Cloud said...
October 8, 2008 at 8:22 AM

Hmm, I inserted the codes just like you said (even used the one from your template), but nothing shows up on my blog.

Am I missing something?


Doug Cloud said...
October 8, 2008 at 8:59 AM

I took a peek at the source code on your own page here and there are some differences from the code you have posted for us in this tutorial.

I'd post it here, but the comments do not allow HTML.


Deineshd said...
October 8, 2008 at 9:03 AM

@dcloud

If the code in the post doesn't work the try the code from the comments which i have replied to praning5254.It will surely work.


Doug Cloud said...
October 8, 2008 at 10:20 AM

I already said that I did that in my previous comment: Hmm, I inserted the codes just like you said (even used the one from your template), but nothing shows up on my blog.

Am I missing something?


Deineshd said...
October 8, 2008 at 10:34 AM

@dcloud

You said that the code from my template still doesn't work.Now the only one way is email me your Template code and i will find solution for it.


Doug Cloud said...
October 8, 2008 at 10:40 AM

And how exactly do I do that?


Deineshd said...
October 8, 2008 at 7:54 PM

@dcloud

This hack is originally from blogger Blogger accessories.There are altogether 3 methods of showing related posts.the method here is the easiest one.you can try other hacks from here.http://rias-techno-wizard.blogspot.com/2008/08/related-posts-widget-for-blogger-bugs.html


Doug Cloud said...
October 8, 2008 at 9:33 PM

I have already tried that one and the others mentioned here. None of them work.


Deineshd said...
October 9, 2008 at 6:47 AM

@dcloud
you said that none of hack works.You can try the related posts by category hack from jackbook from this link.I think it will surely work.
http://www.jackbook.com/blogger-hack-blogspot-hack-blogger-templates-customizing/related-posts-entries-on-blogger-blogspot


Doug Cloud said...
October 9, 2008 at 11:36 PM

Jackbook's codes are poorly written as are his templates so that's no help. I guess it's back to Google to find more reliable hacks and templates that actually work.

Thanks for trying.


Olly Hitchen said...
January 15, 2009 at 2:48 AM

I have a hack for expandable posts and when I input this code, the expandable posts no longer worked, so I uploaded the saved template adnd put in just the first part - no luck! expandable posts was back but no recommended reading links...

After a third attempt (three is the magic number after all!) I put the

if cond='data:blog.pageType ==
(from deinesh's post above)

after the code already in place (that was an if style query too) and all's sorted!

A nice quick, simple hack that has added considerable value to my blog!

Thanks!


P.K.ARUN said...
February 21, 2009 at 9:59 AM

now i am trying in my blog let me it is working or not


aurangzeb said...
April 28, 2009 at 9:52 AM

nice ............


safri4u said...
August 5, 2009 at 10:43 PM

Thankx a TON to you and deinesh


Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!