Related Posts Widget For Blogger – Bugs fixed

24. Aug, 2008 77 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.

Mohamed Rias - has written 94 posts on Techie Blogger

I am Mohamed Rias , admin of Techieblogger.com. Basically I am Engineering student but still blogging is my passion. My areas of interest are HTML , CSS , Jquery , Javascript and PHP.

Visit Authors Website  |  All Articles From This Author
0
hits

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

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

  1. ViCky Reply 15. Mar, 2009 at 9:48 am

    Not working :(

  2. ALLAL Reply 17. Mar, 2009 at 12: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

  3. Amiga Files Reply 01. Apr, 2009 at 12: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?

  4. rashid Reply 12. Apr, 2009 at 1:04 am

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

  5. Bewyn Reply 02. May, 2009 at 1: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

  6. T1Q-NO Reply 17. May, 2009 at 9:31 am

    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

  7. mradvisor Reply 17. May, 2009 at 5:56 pm

    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

  8. test Reply 18. May, 2009 at 5:25 pm

    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

  9. Mohamed Rias Reply 18. May, 2009 at 6:29 pm

    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

  10. Oliva Reply 19. May, 2009 at 8:24 pm

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

  11. Oliva Reply 21. May, 2009 at 4: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

  12. Q'noy Reply 01. Jun, 2009 at 10:01 am

    cool, thanks
    but i still get duplicate post

  13. mnkt Reply 04. Jun, 2009 at 1: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 …

  14. Senthil Reply 19. Jun, 2009 at 7:23 am

    Hi Rashid,

    I need your help for my blog http://indiapatents.blogspot.com. Instead of “Other recommended post on”, I need “Related Post”.

    And also the title and link font and color needs to be matched. I don’t want tinger with the HTML code.

    I would highly appreciate to your reply.

    Senthil

  15. raji ch Reply 19. Jun, 2009 at 7:29 am

    nice hack…..
    thaksssssssss

  16. Hobosic Reply 09. Jul, 2009 at 8:46 am

    Thank you! I would now go on this blog every day!
    Hobosic

  17. Saurooon Reply 18. Jul, 2009 at 1:20 am

    Where are you from? Is it a secret? :)
    Saurooon

  18. Bhagwant Reply 18. Jul, 2009 at 3:29 am

    Hi Rias,

    I need your help

    1. I am not able to implement your related posts hack. In every method blogger is not able to save template.

    2. My post a comment section is appearing twice.

    Thank you in advance

  19. Reel Advice Reply 12. Aug, 2009 at 10:15 pm

    Hi!

    I have successfully implemented the hack but unfortunately, no recommended links are being shown. I used the third method.

    I hope you can reply ASAP via here or my email at support@reeladvice.net

    Thanks!

  20. ?????? Reply 20. Aug, 2009 at 3:25 pm

    that ’s a good tip for blogger Thanks

  21. david Reply 26. Aug, 2009 at 7:41 am

    Tried to implement it, but no related posts unsure what I did wrong if youcan try and view my source it would be appreciated.\|\\\\\

    Dave

  22. Dilla Reply 08. Oct, 2009 at 2:41 pm

    Iam not found tag
    but I have tag
    how the explanation, please…

  23. Dilla Reply 08. Oct, 2009 at 2:45 pm

    Iam not found tag <p><data:post.body/></p>
    but I have tag <data:post.body/>
    how the explanation, please…

  24. mahendra Reply 26. Oct, 2009 at 12:04 pm

    i have tried a lot…but none of the method worked for me.. Please help me… My email: mahendra84@gmail.com

  25. Zalurshop Reply 11. Nov, 2009 at 11:52 am

    I have search bug fix to long. This is the great tip. Thank

  26. Pancallok Reply 05. Jan, 2010 at 3:28 pm

    not worked sir, i have tried a lot all the method..

    via email please : pancallok@ymail.com

  27. swathy Reply 20. Jan, 2010 at 8:38 pm

    I tried the third method. But, its giving an error: Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “type”. Could you please tell me what I have done wrong.

« Older Comments
Blogger Hack, Blogger widget