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.
Consider to Subscribe to our RSS feed or Follow us at Twitter or Join our Facebook Fan Page.Enter your Email below to subscribe to our updates via Email.
Similar Posts
- Show top labels or labels having more posts at label widget
- Add digg button to each of your blog posts
- Create auto Expandable Posts in Blogger with no image thumbnails
- Show Only Post Title at Label and Archive Pages
- Comment numbering in Blogger
Article by Dinesh Dhakal
Dinesh has written 294 awesome articles for us. Dinesh Dhakal(Deineshd) is the Admin of this blog.He is from Kathmandu, Nepal who is blogging since complete 4 years.You can catch him on twitter at Twitter.com/deineshd and in Facebook at Facebook.com/deineshd.
{ 24 comments… read them below or add one }
hemmm,nice hack…
i’ll try…
Thanks
I just tried this hack and it’ didn’t work… It said it can’t be parsed…
@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>
Thanks, Deinesh…
I already tried your suggested code and it now works perfectly…
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?
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.
@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.
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?
@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.
And how exactly do I do that?
@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
I have already tried that one and the others mentioned here. None of them work.
@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
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.
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!
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
now i am trying in my blog let me it is working or not
nice …………
Thankx a TON to you and deinesh
is int your site in unicode???
last comment in hindi language showing
?????? ???????? ? PRAVEEN TRIVEDI´s last blog ..?? ??? ?? ?? ?????? ????? ?????????? ?? ?????? – ????????? ???????? ???
?????? ???????? ? PRAVEEN TRIVEDI´s last blog ..?? ??? ?? ?? ?????? ????? ?????????? ?? ?????? – ????????? ???????? ???
I posted some comments before anyway, because lots of your stuff is really informative.Absolutely amazing man!
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.
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
Thanks …will try this code.
Rohan Rawat´s last blog ..Top 10 party Science stunts !!!