Related Posts on Blogger. And they said only Wordpress has it?
By Jacky Supit • Sep 1st, 2007 • Category: blogger hacksThis is a Related Posts step-by-step Manual Instructions. Before applying this blogger hacks (may i call it a blogger hack? : ) I recommend you to create a dummy / test blog, so everything will still be under control if you are having trouble with it.
Note: If you have problem on installing this trick, please scroll down and read the update below. you can also the demo here. so if you have problem copying this code, you may download that template and copy the code inside it. thanks
update: to make you easier, you can download the related posts / articles on .txt file here.
Actually Related Article by Label has already created by Hoctro, and i must admit that he had done a really great job. that’s why I didn’t create this hack widget (oh I will mention it as Widget from now) from scratch. I use his widget and modifying it as a better and fit to my need.
First, you may want to read the original article on hoctro blogs here. There are couple thing I don’t like from the original widget. there are;
1. On Previous version, It uses 2 blog’s widget. Now I cut the code, so we can put it anywhere on the same blog widget. Why I don’t like to use 2 different widgets? Because your code would be too long, and you can not have your Related Post List right under your post area and Above the comment section. It is because it uses 2 different widgets.
Sure you can use 2 widgets and place the Related Posts Lists under post area and above the comment section, but that would make your code so not tidy. you with me?
2. On previous version, Users have to modify the code them self so they can use it. They have to fill a Parameter with their Blog Url. Now they need no more! I have modified the code so users will be able to use it just as simply as copy and paste.
3. On Previous Version, and this is important. The Current Article / Post will also be listed inside the Related Post/ Article Lists. that is not right isn’t? Related Posts / Articles means Other Articles / Posts which have relation with the current Article. Not the current Article it self.
I believe Hoctro knows all that points I mentioned above. And I’m sure it is easy for him to update and upgrade the code. It just i don’t know how to contact him, because he hide his comment section on his site. So..
Hope he will permit me to do this, I will modify the code by my self for your use. So here it is.
*Again, if you want to have the old version, you can go to that hoctro’s link above.
and here it is,
Step by step to install the
RELATED POST WIDGET FOR BLOGGER / BLOGSPOT
1. GO to your Template Editor, Under your blogger / blogspot Dashboard.
Click on the DOwnload Full Template Link. save your downloaded template as a back up, just to prevent in case you failed on applying this hack.
Then, tick the Expand Widget Templates.
2. Find this code below
<data:post.body/>
3. Copy this code below
update: to make you easier, you can download the related posts / articles on .txt file here.
<div class='clear-block;'/><b:if cond='data:blog.pageType == "item"'>
<div class="similiar">
<!-- *****************http://hoctro.blogspot.com*****Jan,2007****************** -->
<!-- *****************Related Articles by Labels - Take Two****************** –>
<!–
Modified by JackBook.Com to make it easier to use.
1. Now, users don’t need to change anything to use this widget. just copy and paste, and done!
2. The current article will also be listed, now it’s no more.
–>
<div class=’widget-content’>
<h3>Related Posts by Categories</h3>
<div id=’data2007′/><br/><br/>
<div id=’hoctro’>
Widget by <u><a href=’http://hoctro.blogspot.com’>Hoctro</a></u> | <u><a href=’http://www.jackbook.com/’ title=’Related Posts on Blogger Modified by JackBook.Com. Read More?’>Jack Book</a>
</u></div>
<script type=”text/javascript”>
var homeUrl3 = “<data:blog.homepageUrl/>”;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
<b:if cond=’data:blog.pageType == “item”‘>
maxNumberOfPostsPerLabel = 100;
</b:if>
<b:if cond=’data:blog.pageType == “item”‘>
maxNumberOfLabels = 3;
</b:if>
function listEntries10(json) {
var ul = document.createElement(’ul’);
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == ‘alternate’) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(’li’);
var a = document.createElement(’a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == ‘alternate’) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace(”%20″, ” “);
var txt = document.createTextNode(label);
var h = document.createElement(’b');
h.appendChild(txt);
var div1 = document.createElement(’div’);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(’data2007′).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(’script’);
script.setAttribute(’src’, query + ‘feeds/posts/default/-/’
+ label +
‘?alt=json-in-script&callback=listEntries10′);
script.setAttribute(’type’, ‘text/javascript’);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values=’data:posts‘ var=’post’>
<b:loop values=’data:post.labels’ var=’label’>
textLabel = “<data:label.name/>”;
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>
3. Paste right after the code #2 (<data:post.body/>)
Please be flexible. You can do experiment by put the <data:post.body/> inside a <p></p> tag like this.
<p><data:post.body/></p> Then_the_related_posts_script_here
4. Save your template. refresh your blog, and Done.
That’s all. Enjoy!
Note; Related Posts is a list of all posts related to some article based on the labels. And because this uses Javascript, if you want to create a list of posts related by content, it might be pretty hard to do currently.
For some people who always failed and/or getting error on installing this related posts trick. Kirk Warren from weeklycrisis.com has founded the solution for you. here is his comment
The reason you are getting the errors is because whatever he did with the formatting in this script boxes has ” and ‘ wrong. If you look at them in the Blogger template when you paste the code, they come off as ’ (notice it is slanted to the left, not straight down like a normal single quote [ ‘ vs ’ ]. Same thing happens with the ” and “. Notice how one is straight down and the other is to the right [” vs “]. This is what is causing all the hassles for people.
Most likely, when he recovered the post from Google cache, it had reformated the quotation marks on him and this is why you get that error. Manually replace all the ‘ and ” in that section of code and you should be fine.
update: to make you easier, you can download the related posts / articles on .txt file here.
Thanks
Related Entries
- Blogger
Sucks!Bugs! No Two or more Blog Widget on 1 blog! - 25 great tricks to increase your CTR!
- I am sorry..
- 3 Columns Blogger Templates - Blogohblog
- Scheduled Posts on Blogspot / Blogger
- Optimizing Sedo Parking Tips and tricks
About the post author:
Jacky Supit is The man behind the site. Do you have any questions, problems or anything about your blogger or wordpress? AskJack on TemplateForum.Org
Sorry for all deleted comments. I have accidentally deleted this post. I restored this post from google cache.
well how could that happen?? dont you make backups?? wordpress allows users to make backups righy??
[…] The Related Posts has already been embedded. if you want to remove it, please read about this widget (on the link […]
Thank you so much for this hack! I have been trying for days now to implement this, and your version is the only one so far which has worked for me
Just one thing though: when I tried to copy and paste the code into my template, I kept getting error messages about that “–” was not allowed in the comments, ot that the XML was not properly formed. The way I eventually used this was by copying the code from one of your other blogger templates instead.
However, I am just so happy that I managed to finally install this script! Many many thanks :))
Hi Amanda,
many people put the code on the wrong place. please make sure that you paste all the code rite after the <data:post.body/>
Thank you!
I’ll look into this for sure,
Thanks for giving your comments. I n so busy I turn off comments.
help me! i cannot add this thing. This is my blog http//michealsoft.blogspot.com
have you followed all the instructions carefully?
what is the error message you got?
It seems like there may be an issue with the quotation marks in the posted code (maybe as a result of recovering the post?). Tried figuring it out, but wasn’t able to.
Sorry to bother you but it actually looks kool. However I don’t know why I am receiving this message after trying to save the template: Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The string “–” is not permitted within comments.
Any input?
i have this error
error de XML: The string “–” is not permitted within comments.
coudl somebody tell me what is???
so many script i
dont understand
The reason you are getting the errors is because whatever he did with the formatting in this script boxes has ” and ‘ wrong. If you look at them in the Blogger template when you paste the code, they come off as ’ (notice it is slanted to the left, not straight down like a normal single quote [ ‘ vs ’ ]. Same thing happens with the ” and “. Notice how one is straight down and the other is to the right [” vs “]. This is what is causing all the hassles for people.
Most likely, when he recovered the post from Google cache, it had reformated the quotation marks on him and this is why you get that error. Manually replace all the ‘ and ” in that section of code and you should be fine.
Thanks for your finding Kirk. I will put your answer as an update on my post. thanks
Wow….
I just thought…googled…and got….
thanks for this hack…
[…] 4. Jack Book.com […]
Your related posts version finally works for me (THANKS!) but I have a problem with labels that have countryspecific characters in it (I am german). So the letters ä,ö,ü and ß are converted in the Hack. Example: The word Fundstücke shows up as Fundst%C3%BCcke. I could of course change the labels - no problem at all. But if there’s a way to display them correct in german that would make the hack even more useful.
There’s another small visuell issue: If you give your post a label for the first time the hack can of course not show any related post to it but it still displays the new label. Is there a way to avoid that?
Oh that is a good finding.
thanks Filthyfun, I’ll try to figure it out.
thanks
Just replace:
var txt = document.createTextNode(label);
with
var txt = document.createTextNode(decodeURI(label));
Enjoy!
Hey nice Job!
I’m using this widget!!
Few suggestions for improvement…
1. Why don’t you increase the space between the Main Post and “Related Posts by Categories” line
2.Most importantly why don’t you include something so we can limit number of related posts appearing say to 2,5,10
Thanx in advance…
oh that’s cool.
let’s try that later, thanks
Hey it’s in the code! I modified my code a bit, to get the tweaks I needed! Update version on my website!
Okie, i got this thing worked.. but i changed few things..
like “”.. its not working for me
so, i changed it to ”.. now its working!
instead of “ ”
i use ‘ ‘
on “”
Thanks. Very useful addition. But there is one problem. The Widget distorts the coding non Latin names of labels. I unfortunately could not understand in Java code. There can be you will prompt as to remove output of the name of a label under an inscription “Related Posts by Categories”?
Cunt Nice…
…
Woman A To Seduce How…
…
Naked Rebecca Loos…
…
[…] is a Related Posts step-by-step Manual Instructions. Before applying this blogger hacks (may i call it a blogger hack? : ) I recommend you to create a dummy / test blog, so […]
i will try this one!
wow! i added it already it so easy!
(eeew! you have some spam comments!)
thanks Julia, yea, i hate those spam
seems my askimet doesn’t work correctly these days
Thanks for the great hack. I’ve successfully installed this on my blogs.
rachel poen starr star…
rachel poen starr star…
Thanks you very much:) This post is full help with me -> Unicode Support for me -> Thanks Cihan
http://limasite.info/replica-handbags/designer-handbags-vuitton-replica.php
i have no this string
Using your templates. what to do?
p.s. world-area-codes.blogspot.com
hi Tim,
thanks
sorry, but what were you trying to say?
i’m afraid, i don’t get it
thanks you so much bro jackbook, Good Luck..!!
Hi Jack. I followed your instructions… however it is getting related posts based on category. Is there anyway I can make that as Related Posts based on the title. Also, the Related post only appear when you visit each page. Is there any way to make it on the first page?
Thanks
HYe
Hi SoR
Of course the related posts list appears on the post page. if it is appear on the front page, then which those links related to? relate to the homepage?
sorry, but currently, i have only the related posts by category.
thanks
Hi Jack,
IE show this ERROR my blog oiaceive.blogspot.com
entry has no properties
[Break on this error] var posttitle = entry.title.$t;
Can you help to resolve it?
Tanks
not works on me but demo site was good.
I found nothing to replace.hoe bout that?
just set this up. thanks!
Hi,
I installed the code as it was instructed here, but it’s still not showing up on my blog (www.theprorfessionalassistant.net).
Please help.
Thanks,
Richard Rinyai
http://www.theprofessionalassistant.net
I guess the code has some problem. i have to copy from other template
Its really useful Jack…
Hey jack,this is a great hack and its working fine for me.
I have one question for you, how can we limit the number of related posts per label or overall,its showing too much related posts.
thanks
Work for me when i use txt link code i paste this code above
thanks !!
includable id=’commentDeleteIcon’ var=’comment
above this code
hi.. i followed this tutorial link from my friend abibakar (http://abibakar.blogspot.com)
really nice..
i’ve planted it on my blog. Thank you jack!
“Why don’t you increase the space between the Main Post and “Related Posts by Categories” line”
I would also like to have more space between main post and this widget. Is there anything I could do to fix this?
“I have a problem with labels that have countryspecific characters in it (I am german). So the letters ä,ö,ü and ß are converted in the Hack. Example: The word Fundstücke shows up as Fundst%C3%BCcke. I could of course change the labels - no problem at all. But if there’s a way to display them correct in german that would make the hack even more useful.”
I have this same problem with my Finnish blog. And I really need to use ä and ö. Hope there would be same way to correct this.
Is there any other way of doing the related post… i mean instead of related post by category, it could be related post by keyword or something. Thanks.
Yeah, it would be also be nice if it was like this.
thanks Jack.. lastly i manage to insert this on my blog.. problem occur because of the quotation thing.. many2 thanks.. my blog is rocking awsome now!. i think this is the simplest way to add related posts into blogger.
Hi, how do you get rid of the label showing above the related posts, like you have on your site.
Thanks.
still not made it jack
Female seven is great for man
Amazing, wonderful, marvelous !!!
(I suppose there’s no way to decrease the size of the text “Related posts from categories”)
Thanks for this hack, jack !
mas punya saya udah tak install dan sukses.
tapi kok ga muncul ya?
trus saya mo nambahin related post-nya gmn?
thx
Jack,
Thanks for this hack. I have two questions:
1. When I create a post with a brand new label, the back shows that label as heading even though there are no other posts in it. Can I hide that heading?
2. Is it possible to hide all the label headings and just have the posts listed?
Thanks,
Dave
Hi Jack, thanks for this hack.
I’ve installed it for quite a while.
Just want to share one thing. We can also add adsense code inside this hack.
Thanks again.
Hi Jack. I love your script, really well done. But before getting it back to my blog I also would like to get rid of the label headlines and to just have the post listed instead. Could you tell us what to change in the code please?
This script belong to : http://hoctro.blogspot.com
please write source of this post
Sigh…I’ve been doing this all evening and it’s not working. The widget isn’t showing up on the page at all. I didn’t get any error messages so I don’t understand what the problem is.
[…] Read more and install related posts for your Blogger blog (Jackbook version) […]
Thanks jack, but where should i paste it if i want it after all comments?
Please pardon me if this seems a silly question, but is this hack specific to “New” Blogger or will it also work on my Classic Blogger-based blog?
[…] Related Content Every page of your website should be interlinked to related content. Include a sub-heading that identifies related articles and include links to other content that might interest your readers.Don’t have it yet? You can learn about how to put related content on your blogspot blog here. […]
Hi Jackbook
i keep getting the following error:
Your template is invalid because the tag ‘b:section’ appears inside of the tag ‘head’.
any ideas on how to fix this? can this hack be added to this particular template? thanks so much for your help
OMG.
I just installed this hack and it worked… perfectly!
Thank you SO much for making this super easy - I am still in shock of how simple it was - lol.
You ROCK!
Jacky,
Thanks for the help that I got from this post. Only a couple of problems I have now.
One is that is there anyway, these related posts can come below the post on the first page also or can they only show on the post page. Your comment of Jan 2008 says it can be there only on the post page. Any change now?
Secondly, anyway these related posts can come below the footer?
Vikas.
Thanks
hi, i put your hack on my blog and that’s the error: Element type “b:if” must be followed by either attribute specifications, “>” or “/>”. any help? my blog: http://scappadallastanzablogspot.com
thanks for this hacks..:D
hi,
i dont know if i should ask this, but i’m new to blogging. my blog already have nearly 400post and i dont label any post. the code detect post label. i cant imagine to label all the post all over again. can the code detect related post by post title?
please help. thanks.
Hello Jack
I tried to add the related posts in my blog but could not help it.Every time i am getting the error message.I have also tried replacing all that” and ‘ but still the same.Please provide an updated code.
Many of us need it badly
thanks
Amit
http://techthek.blogspot.com
hi Amit, blogger have changed their system, i guess i have to modify the codes first. please be patient. thanks
@muhammed: “Hi, how do you get rid of the label showing above the related posts, like you have on your site”
I’m trying to do this same thing… Jack can you please tell us how you get it the way YOU have it on your blog? Without the label showing above the related posts?
Hi jack. I would like to delete the name of the label that appear before the related links. What i have to change in the code?Thanks!