A blogger hack to show related Posts below Each blogger Posts
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.
Share This Post
23 Comments
Sep 22, 20083:01 pm
I just tried this hack and it’ didn’t work… It said it can’t be parsed…
[Reply]
Sep 22, 20083:18 pm
@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 == "item"'>
<div id='related-posts'>
<h2>Other Recommended 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&max-results=5"' type='text/javascript'/></b:if></b:loop> </h2>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div></b:if>
[Reply]
Sep 23, 20085:48 am
Oct 8, 20083:22 pm
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?
[Reply]
Oct 8, 20083:59 pm
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.
[Reply]
Oct 8, 20084:03 pm
@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.
[Reply]
Oct 8, 20085:20 pm
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?
[Reply]
Oct 8, 20085:34 pm
@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.
[Reply]
Oct 8, 20085:40 pm
And how exactly do I do that?
[Reply]
Oct 9, 20082:54 am
@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
[Reply]
Oct 9, 20084:33 am
I have already tried that one and the others mentioned here. None of them work.
[Reply]
Oct 9, 20081:47 pm
@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
[Reply]
Oct 10, 20086:36 am
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.
[Reply]
Jan 15, 200910: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!
[Reply]
Feb 13, 20093:47 pm
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
[Reply]
Feb 21, 20095:59 pm
now i am trying in my blog let me it is working or not
[Reply]
Apr 28, 20094:52 pm
nice …………
[Reply]
Aug 6, 20095:43 am
Thankx a TON to you and deinesh
[Reply]
Nov 9, 20096:39 pm
is int your site in unicode???
last comment in hindi language showing
?????? ???????? ? PRAVEEN TRIVEDI´s last blog ..?? ??? ?? ?? ?????? ????? ?????????? ?? ?????? – ????????? ???????? ???
?????? ???????? ? PRAVEEN TRIVEDI´s last blog ..?? ??? ?? ?? ?????? ????? ?????????? ?? ?????? – ????????? ???????? ??? 
[Reply]
Nov 30, 200911:51 am
Dec 15, 20096:42 pm
I was wondering if you had a post describing how you set up your related posts widget and blog subscription panel side by side. I really like the way it looks on your posts and wanted something similar with different graphics. Thanks for any help.
[Reply]
Jan 22, 20102:37 pm
I can’t use this on my blog…
Eky Dakka´s last blog ..Diabetic Foot Care Products: What Should Be Included In Your Diabetic Kit
[Reply]
« 20 professional Looking Templates for new Blogger Next Post
Install Syntax Highlighter for better code Viewing in Blogger »
Blog RSS Feed
Subscribe via E-mail
Follow Me on Twitter
9:16 pm
hemmm,nice hack…
i’ll try…
Thanks
[Reply]