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

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

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


praning5254 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...


Deinesh said...
September 22, 2008 at 8:18 AM

@praning5254

Try to replace the code with this code.This code is from our Template.

<p><data:post.body/></p>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<h2>Other Recommended Posts <b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </h2>

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

</div></b:if>


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

Thanks, Deinesh...

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


dcloud 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?


dcloud 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.


Deinesh 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.


dcloud 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?


Deinesh 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.


dcloud said...
October 8, 2008 at 10:40 AM

And how exactly do I do that?


Deinesh 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


dcloud said...
October 8, 2008 at 9:33 PM

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


Deinesh 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


dcloud 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.


Rupert StClair Photography 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!


KMc said...
February 13, 2009 at 7:47 AM

Searchles just launched Related Posts widget last week that's really easy to grab for Blogger. It actually analyzes the content of your posts for better relevancy so you don't even have to tag. Not to shamelessly promote, but you guys should check it out! http://www.searchles.com/misc/platform


╚»█ ▄ █ ▄•▬●๋•«╬♥℘.Ķ.ÁℛÚŃ♥╬«●๋•▬• █ ▄ █ ▄«╝♥(๏̯͡๏) 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!