Advanced Search Module

Close Search
 

Related Posts Widget For Blogger – Bugs fixed

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.bloggerdummies.com”>Blogger Dummies</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
<
br /
><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.

Related posts:

  1. Related Posts Widget For Blogger with CSS
  2. Show Date before each Post in Blogger
  3. Add yahoo Smileys on Blogger Posts – Blogger hack
  4. Star Ratings Widget for Blogger
  5. Page Navigation Menu Widget for Blogger
 
 

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

  • ?? August 24, 20086:54 pm

    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

  • Mohamed Rias August 25, 20081:52 am

    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

  • PenCuri Kode August 25, 20088:13 am

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

  • PenCuri Kode August 25, 20088:14 am

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

  • Riccardo August 29, 20089:54 am

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

    Thanks
    Riccardo

  • ?? August 30, 20087:24 am

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

  • Dave September 3, 20088: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

  • Mohamed Rias September 3, 20089: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.

  • Jam DG September 6, 20083:37 pm

    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.

  • Ari Herzog September 12, 20087: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.

  • TechieBird: September 15, 20085:14 pm

    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

  • Mohamed Rias September 15, 20085:23 pm

    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

  • Rahul Jadhav September 16, 200810: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

  • Mohamed Rias September 16, 20081:39 pm

    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

  • Rahul Jadhav September 16, 20083:40 pm

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

  • Wendy September 25, 20084:41 am

    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

  • Wendy September 25, 20084:47 am

    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

  • Wendy September 25, 20084:59 am

    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.

  • Bro Chan September 30, 20082:54 am

    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.

  • Danny October 6, 200810: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

  • dcloud October 8, 20083:00 pm

    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.

  • dcloud October 8, 20085:41 pm

    Is anyone here?

  • Mohamed Rias October 9, 20081:34 am

    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

  • idledownloads October 11, 20089: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)

  • Deepa October 11, 20089: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.

  • Rafiq Raja October 15, 20088: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.

  • Typhoon October 15, 200812:40 pm

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

  • Pavel October 22, 20084:35 am

    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

  • umair October 24, 20086:19 pm

    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

  • Deepa November 5, 200811: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

  • DrWiz November 9, 20089: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

  • Krishna November 14, 20082:27 am

    awesome boss worked for me

  • Shafar November 16, 200811: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

  • taint November 23, 20084:15 pm

    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

  • mackenzy December 5, 20083:53 pm

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

  • Shaid December 7, 20089: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

  • gettingmoneywise December 30, 20086:07 am

    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

  • "Patrick Bateman" January 10, 200911:29 pm

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

  • Cush January 14, 200910: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

  • The sword January 14, 200911:30 pm

    thanx for inf

    http://egyphoto.blogspot.com/

  • Cush January 21, 200911: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?

  • Nusantara Palace January 25, 200911: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

  • RKY February 1, 20096:06 pm

    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)

  • taint February 9, 20098: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

  • True Hacking February 21, 20094:47 pm

    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

  • SYED MUBALLIGH February 27, 20092:35 pm

    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

  • Ravi Kuntamukkala March 4, 200911:40 am

    Not Working !!
    Please Check My Template

    http://www.networkzindia.com

  • Amol March 11, 20099: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.

  • Stone-Cold Angel March 13, 20093:50 am

    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.

  • None March 13, 200910:21 pm

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

  • ViCky March 15, 20094:48 pm

    Not working :(

  • ALLAL March 17, 20097:38 pm

    Hello, Mohammed.

    I’ve this error but to fix is easy: just delede the
    background image url in your code html.

    Look You Can Also Read On Linux Kernel :

    http://chams-blog.blogspot.com/2009/03/how-to-configure-linux-kernel.html

  • Amiga Files April 1, 20097:41 pm

    Hi,

    I used second method on my blog however in the related post list, it duplicates the current post’s title again. How can I prevent this duplication?

  • rashid April 12, 20098:04 am

    thanks Rias..
    it’s working..
    love it..

  • Bewyn May 2, 20098:06 am

    i followed the Third Method sir
    here i want to remove other recommended posts on (label name) i would like to remove the lable name how to do that sir pls help my
    bewyn_daniel@yahoo.co.in

  • T1Q-NO May 17, 20094:31 pm

    ok…thank rais… i have tried it. nice and 100% worked. just change the width to justify my blog. Please come and suggest me about my blog.
    http://tipsandcara-ngeblog.blogspot.com

  • mradvisor May 18, 200912:56 am

    Hello
    Love this posts, none of the first two were possible for me but the last one came out perfect. I would like to know if it’s possible to just have “Other related articles” only and not the label after.

    thanks in advance

  • test May 19, 200912:25 am

    Method 1 and 2 did not work at all. Method 3 works only if you say how to remove the label. Is the author checking the comments?

    can see that many people has asked without any response. well, hurry and respond us all

  • Mohamed Rias May 19, 20091:29 am

    Hi Guys ,

    Sorry for replying so late. I am busy with my exams preparation. Once my exams get over i will post more hacks and templates and will reply to reader’s comments too..

    I have changed the code to hide those labels title. Please update the last code to be added in the template.

    Thanking you,
    MOhamed Rias

  • Oliva May 20, 20093:24 am

    It works now! Method three is great! But it does affect my social bookmarking icons. Thanks Mohamed.

  • Oliva May 21, 200911:29 pm

    thanks a lot, it works perfectly. I realized that I had to put put the social bookmark widget below post.body and then your code. thanks for this tutorial. been perfect

  • Q'noy June 1, 20095:01 pm

    cool, thanks
    but i still get duplicate post

  • mnkt June 4, 20098:36 am

    thanks for your code, but when I apply it for my blog, a small problem appear like in this pic (http://i159.photobucket.com/albums/t139/kazihaha/error.jpg), and duplicate post still appear …

  • Sudeep Acharya May 29, 20105:54 pm

    Nice widget with no errors.
    Thanks

  • Related Posts Widget For Blogger – Bugs fixed @ BloggerDummies | Intenseblog.com
  • Ethical Hacking April 25, 20111:36 pm

    it is well explained…. i try implementing it in one of my blog

  • sprdk.blogspot.com May 15, 201112:41 pm

    :) thanks!! I used the method 2 and it worked very well! really briliant! Big thanks :D

  • rakin July 28, 20112:10 am

    good hack ………….see my blogger site
    My Blogger site

 
 

68 Responses to "Related Posts Widget For Blogger – Bugs fixed"