Related Posts Widget For Blogger – Bugs fixed

24. Aug, 2008 80 Comments

Many of my readers are asking help to add Related Posts Widget . I was confused because i have added all the code correctly then why my friends are not getting this hack working. So i looked the templates of all those who sent me error message . All their templates are of same structure ( labels line is appearing below post , see the screenshot below)

Related Posts Widget Bug

But the script i have included in the post is for those who have Label line below post title like this.

Related Posts Hack original format

Bloggers with the above format are not getting this related posts hack because the script loads earlier than the Labels line. We can fix this error in Three methods.

Method One :

Login to your blogger account and navigate to Layout section of the blog. Then go to edit HTML page and check expand widgets box.

Now search this line : <div class=’post-header-line-1′/>

Now please copy and paste the code above that line.

<span class=’meta’>

<b:if cond=’data:post.labels’>
categories :
<b:loop values=’data:post.labels’ var=’label’>
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><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=10&quot;’ type=’text/javascript’/>
</b:if>
</b:loop>
</b:if>

<b:if cond=’data:post.allowComments’>
<a class=’comment-link’ expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><b:if cond=’data:post.numComments == 1′> 1 <data:top.commentLabel/> &#187;<b:else/> <data:post.numComments/> <data:top.commentLabelPlural/> &#187;</b:if></a>

</b:if>

</span>

you can customize the text in red to display as many results you want.

Now add the below CSS code above ]]></b:skin>

.meta{float:left;width:480px;padding:3px; color:#111; font-size:12px; margin-bottom:8px; line-height:20px;border-bottom:1px dotted #cccccc;}
.meta a{color:#cc0000;}
.meta a:hover{color:#000000;}

Please edit the text in red to suit your template.

After this you need to add the CSS code and javascript i provided in this post ” Related Posts Widget with custom CSS “.

Now add the script below this line <p><data:post.body/></p>

<b:if cond=’data:blog.pageType == “item”‘>
<div id=”related-posts”>
<h2>Other Recommended Posts</h2>
<script type=’text/javascript’>
removeRelatedDuplicates(); printRelatedLabels(); </script><div style=”display:none;”><a href=”http://www.techieblogger.com”>Techie Blogger</a></div>
</div></b:if>

Thats it , now you will have related posts widget in your blog.

Method 2 :


If you follow step one then you will have two meta lines in your Blog. One below post title and one below post content. If you are happy with first method then stop or else do these steps to add related posts hack. ( don’t do both)

step 1 : First of all add the below code above </head>

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

step 2 :
Now search this text

<b:loop values=’data:post.labels’ var=’label’>
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><b:if cond=’data:label.isLast != &quot;true&quot;’>,</b:if>
</b:loop>

Now replace the above text with this code

<b:loop values=’data:post.labels’ var=’label’>
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><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>

Now scroll down still you can find ending tag for either </div> or </span> . Now paste the following script below the ending div / span tag.

<b:if cond=’data:blog.pageType == “item”‘>
<div id=”related-posts”>
<h2>Other Recommended Posts</h2>

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

</div></b:if>

That’s it now you will have related Posts hack in your blog.

Third Method :

In my Blog I am using this method . It’s very simple. First do the step 1 from method 2 . ( adding script above </head> ) .

Now add the following tag below <p><data:post.body/></p> .

<b:if cond=’data:blog.pageType == “item”‘>
<div id=”related-posts”>
<h2>Other Recommended Posts on<div style=”display:none;”> <b:loop values=’data:post.labels’ var=’label’><data:label.name/><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></div> </h2>

<script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div></b:if>

Now you will have related posts widget of my style.

I hope one of the above method will help you to add related posts widget to your Blog. Still if you have problem then please contact me through contact form.

   

- has written 99 posts on Techie Blogger


Visit Authors Website  |  All Articles From This Author
0
hits

If you like this article , then please help us by bookmarking

80 Responses to “Related Posts Widget For Blogger – Bugs fixed”

  1. 阿厝 24. Aug, 2008 at 11:54 am

    hi,thx for reply first.
    But i just found out a problem.My template didn't have the "＜p>＜data:post.body/>＜/p>"
    ,so i past the step3(this page)below"＜p>＜data:comment.body/>＜/p>".

    And the other problem is the position of this hack.Please see this picture.I wanna the "Top of this page" & "reply" could be between the "Tag"&"post comment" instead of next to it.

    I use method 2 in this page.What shall i do if i wanna solve the problems above?
    sorry for many problems.
    Cheers
    Tsai

  2. Mohamed Rias 24. Aug, 2008 at 6:52 pm

    Hi 阿厝 ,

    It's very simply . Now you can solve this problem in two methods. Either in CSS code increase the width. ( related posts hack width = main content width ).

    or just add this tag above and below the related posts script

    <div style='clear: both;'/> .

    If you still have this problem , then send me your template code to my email mohamedrias1103@gmail.com , I will implement this hack in your blog.

    regards ,
    Blogger Accessories

  3. PenCuri Kode 25. Aug, 2008 at 1:13 am

    Thank you for informasi him and tips I will immediately try first… and I requested his guidance if I experienced error… OK

  4. PenCuri Kode 25. Aug, 2008 at 1:14 am

    Thank you for informasi him and tips I will immediately try first… and I requested his guidance if I experienced error… OK

  5. Riccardo 29. Aug, 2008 at 2:54 am

    Is there a method to add “Related Post” to my Classic Template?

    Thanks
    Riccardo

  6. 阿厝 30. Aug, 2008 at 12:24 am

    Thank you Rias!
    I made it finally.
    Thank your instructions. :)

  7. Dave 03. Sep, 2008 at 1:55 am

    hi Rias
    Got problem after installing this code. A big gap appear between my post title and contents.
    Please help.
    http://davedeli.blogspot.com

  8. Mohamed Rias 03. Sep, 2008 at 2:28 am

    Hi Dave ,

    I hope everything is fine in your blog. Still if you have any problem ask me. Or send me your template to mohamedrias1103@gmail.com

    regards,
    Blogger Accessories.

  9. Jam DG 06. Sep, 2008 at 8:37 am

    Hi Dave,
    I did as you recommended in the third method, and it works like heaven. You really ROCK!. Your explanations were perfectly clear, so I will put your blog in my list of blogging help. (English is not my mother language neither most of my readers). If you would like to see what I´done my blog is: http://diseno-catarsis.blogspot.com , I would be honoured.

  10. Ari Herzog 12. Sep, 2008 at 12:12 pm

    As I have a custom template which I since tweaked myself, I’m very confused where I should put everything.

    Rather than giving me three different options, can you tell me what I need where that will work on any template?

    Thanks.

  11. TechieBird: 15. Sep, 2008 at 10:14 am

    Thanks so much for this – I tried methods other people had posted but this is the only one that works properly and looks much nicer!

    Just one question… the max-results value doesn’t seem to be doing anything for me, I have it set to 5 but I’m getting 12 results back! Is there a line I need to add somewhere?

    Thanks

    tb

  12. Mohamed Rias 15. Sep, 2008 at 10:23 am

    Hi TechieBird ,

    welcome to Blogger Accessories. You are getting 12 results because , 5 represents 5 results in each label.

    I saw your blog , you are using more than one label for each post. So reduce the max results from 5 to 3 , then you will get low results.

    If you still need any assistance , then please ask here

    regards,
    Blogger Accessories

  13. Rahul Jadhav 16. Sep, 2008 at 3:07 am

    Hi Mohamed Rias, nice work. I really liked your work.However please check the following link
    http://realtrix.blogspot.com/2008/09/create-related-posts-plugin-for-blogger.html#comment-form

    it also has a realated posts trick and it is very similar to your 2nd method and the main thing is that i got that page in google search when i searched for the trick not yours

  14. Mohamed Rias 16. Sep, 2008 at 6:39 am

    Hi Rahul Jadhav ,

    Thanks for letting me know this issue.

    I warned the owner of that blog already , he told me that he will remove it within two days , but still he haven’t ( 3 days over ). I will wait two more days then I will take some action.

    regards,
    Blogger Accessories

  15. Rahul Jadhav 16. Sep, 2008 at 8:40 am

    I just checked his blog now….he has given credits to you at the bottom of the post

  16. Wendy 24. Sep, 2008 at 9:41 pm

    I tried all 3 versions and also the instructions on the other page. Nothing works. Nothing shows up on the screen. I know where to paste everything and your instructions are clear so I don’t know what I am doing wrong. I am testing it on http://www.swishersweetie.com

  17. Wendy 24. Sep, 2008 at 9:47 pm

    Ah, nevermind, I see it now. So, this only works when you click on an individual post? How can I get it to show up on my main page?

    I also see a slight problem with the layout. It moved my “Posted by” and “Labels” to the left outside of the bordered area. Do you know how to fix this?

    Example here:

    http://www.swishersweetie.com/2008/09/blogging-for-living.html

    Thank you – Wendy

  18. Wendy 24. Sep, 2008 at 9:59 pm

    Wow, I keep answering my own questions. I figured it out. I made the H2 an H3 and also changed the 540px width to 400px and it solved the problem.

    Now I need to figure out how to get the “Create a Link” to show at the top of the page near or above the title.

  19. Bro Chan 29. Sep, 2008 at 7:54 pm

    Thank you for the post. I tried it on my blog and it’s working. Great stuff. Now I just need to tweak it a little bit here and there to customize it a bit. But still, GOOD JOB Mohamed Rias.

  20. Danny 06. Oct, 2008 at 3:56 pm

    I’ve been using this widget and now it isn’t working…i tried it on my dummy blog and it works there…do you know why this would happen?

    http://www.overthehillandonaroll.com – real blog
    http://dannyjay-jay.blogspot.com – dummy blog

  21. dcloud 08. Oct, 2008 at 8:00 am

    I tried method three, put the codes exactly where you said, and I don’t get anything on my blog pages. Do you have to enter something in the codes to make them work? Enter links to your “related” posts?

    Would appreciate some help.

  22. dcloud 08. Oct, 2008 at 10:41 am

    Is anyone here?

  23. Mohamed Rias 08. Oct, 2008 at 6:34 pm

    Hi Dcloud !

    This is my Google talk id : mohamedrias1103@gmail.com

    add me to your contacts and buzz me whenever u see my online. Or send me your site template , I will implement that hack to suit your template.

    regards,
    Blogger Accessories

  24. idledownloads 11. Oct, 2008 at 2:44 am

    Hi Mohd..,
    Thnka for the hack…I tried on my blog and i am unable to craete one.
    It is is showing as recommended posts but not under the post content, it is on left side…henc, i deleted it cud plz xhk my blog code….thnks

    srikanth (idledownloads)

  25. Deepa 11. Oct, 2008 at 2:56 am

    Hi,
    Awesome.. I tried at my dummyblog…and works simply great
    but i have just onme query ..

    I am using Hackosphere’s peekaboo hack.
    So i would like to show the related posts in the main page itself ( my main page shows only 3 posts)

    so would it be possible to show this in the main page itself ?

    Thank you once again .. this is a much needed hack.

  26. Rafiq Raja 15. Oct, 2008 at 1:15 am

    Hi Rias, it’s a wonderful code snippet. I have used that in my blog. One Question: Is there a way we can eliminate the item page from the list of related posts. I am digging into that, and your input would help.

  27. Typhoon 15. Oct, 2008 at 5:40 am

    In your template you have removed labels after “Other Recommended Posts”.How to do that?

  28. Pavel 21. Oct, 2008 at 9:35 pm

    Hi Rias,

    Thank for your guide. It’s good for me.
    But, the same question with Rafiq Raja: Is there a way we can eliminate the item page from the list of related posts?

    Best regards,

    Pavel

  29. umair 24. Oct, 2008 at 11:19 am

    hello,
    pleas tell me how can i add related post widget in my blog
    my blog address is
    http://file4download.blogspot.com

    and scripet is

    and how can i put readmore in blog

  30. Deepa 05. Nov, 2008 at 4:15 am

    Hi,
    Sorry to bother you again on this,
    But can you please guide me on how to display
    the related posts in the main page.

    Thank you,
    REgards.
    Deepa

  31. DrWiz 09. Nov, 2008 at 2:35 am

    Hey Riyas, Great work. Well my query is unrelated to this post, Once I saw one feature on your blog which would enlarge a pic on your site in the page itself, something done with ajax i guess. I’d like to have that feature for the pic blog am running, can you please help?

    Thank you

  32. Krishna 13. Nov, 2008 at 7:27 pm

    awesome boss worked for me

  33. Shafar 16. Nov, 2008 at 4:10 am

    Great Widget Rias…! It worked for me, but a little problem, one of the related post is the original post itself. Pls help

    TipsBlogger.com
    Shafar@tipsblogger.com

  34. taint 23. Nov, 2008 at 9:15 am

    nice work. the 2nd option is the one that worked for me. but i wanna know how do I change the color of the text of the links and text of the widget. please get at me or help me with this my email is themexicantaint@gmail.com

  35. mackenzy 05. Dec, 2008 at 8:53 am

    how do we remove the long string of labels that post after the title??

  36. Shaid 07. Dec, 2008 at 2:58 am

    Hello…
    I added it in my blog http://scholarshipsme.blogspot.com
    but currently it is showing the title that is viewing without another related post…I think it is bcoz it is not finding any other post related to it…
    And thus i think it should show “no related post found” like this…
    Thank you.
    Best of the best video

  37. gettingmoneywise 29. Dec, 2008 at 11:07 pm

    HI,
    I have labels appearing below the title itself and i have done the setup as mentioned in the post.I still do not get to see the recent posts widget.Can you help me with that

  38. "Patrick Bateman" 10. Jan, 2009 at 4:29 pm

    I could not get this to work at all… let me know if you are interested in helping – thanks!

  39. Cush 14. Jan, 2009 at 3:45 am

    Hi Rias, thank you for this hack. I finally realised that the related posts only come up on the post page not the main page :)

    Do you know how I can add this to the posts on the main page?

    Also, how can I remove the list of labels that come up with this?

    And….how do i remove the current post?

    Thanks again

  40. The sword 14. Jan, 2009 at 4:30 pm

    thanx for inf

    http://egyphoto.blogspot.com/

  41. Cush 21. Jan, 2009 at 4:10 am

    Thanks for that! Brilliant. I used method 3 and it works excellently.

    Is there a way to get the related posts to appear underneath the posts on the home page as well as on their own page?

  42. Nusantara Palace 25. Jan, 2009 at 4:37 am

    Hi Rias, it very interesting post. But, I didn’t found your tips about how to make related post in blogger classic template. I really need your tutorial. Please check it my blog to give me suggestion coz I also want to change my header image,thanks.
    http://indonesia-tourismguide.blogspot.com

  43. RKY 01. Feb, 2009 at 11:06 am

    There is any way to set related post widget to search just one or two label in related post widget. means because due to too many label in one post it slow up page loading..or how i set related post widget to search specified label in related post widget..
    (sorry for My bad English)

  44. taint 09. Feb, 2009 at 1:37 pm

    I installed your hack to my blog and now on my related posts widget it has an UPGRADE TO PRO image behind the links causing the text not to be seen. how do I fix this? get at me asap.

    I run a popular blog and do not want to inconvenience my visitors. my blog is The Mexican Taint

    email: themexicantaint[at]gmail.com

  45. True Hacking 21. Feb, 2009 at 9:47 am

    Hi Mohamed Rias

    i have tryed to implement this hack but i am not able to do this so i sent a my blog templete to you pls do it & send to me pls pls

  46. SYED MUBALLIGH 27. Feb, 2009 at 7:35 am

    ur blog is great………

    i hav installed “Related post” with ur 3rd method… i can manage to install it…. but i want that thing like urs…… ur Popular post is greate….. it has good css effect……. can u plzzz tell me how to create popular post like urs….

    check my site: http://www.tricksystem.com

    my email: syedmuballigh@yahoo.com

  47. Ravi Kuntamukkala 04. Mar, 2009 at 4:40 am

    Not Working !!
    Please Check My Template

    http://www.networkzindia.com

  48. Amol 11. Mar, 2009 at 2:14 am

    Thank you very much!!!
    I have implemented it in my blog.
    It would be great if we were able to remove the name of current post from the list of related posts.

  49. Stone-Cold Angel 12. Mar, 2009 at 8:50 pm

    Hi, Great post on this related links. However, I tried your method 2 for putting related post after my post but it seems its not working. It said an error message that it could not be saved. Here’s the error message:
    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 element type “b:if” must be terminated by the matching end-tag “”.

    This is my blog – 9mmdotnet.blogspot.com
    Contact me at 9mmonline@gmail.com for anything you need.

  50. None 13. Mar, 2009 at 3:21 pm

    Not Working On My Blog http://www.Apniplace.tk
    http://www.apni-place.blogspot.com

Newer Comments »

Leave a Reply

You must be logged in to post a comment.

Blogger Hack, Blogger widget