Aug 24, 2008 in ,

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

Check Out This Popular Posts

63 Responses So far
gravatar
poan
on August 24, 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

gravatar
Mohamed Rias
on August 24, 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

gravatar
Imnoval
on August 25, 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

gravatar
Imnoval
on August 25, 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

gravatar
Riccardo
on August 29, 2008 at 2:54 AM  

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

Thanks
Riccardo

gravatar
poan
on August 30, 2008 at 12:24 AM  

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

gravatar
Dave
on September 3, 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

gravatar
Mohamed Rias
on September 3, 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.

gravatar
Anonymous
on September 6, 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.

gravatar
TechieBird:
on September 15, 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

gravatar
Mohamed Rias
on September 15, 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

gravatar
J
on September 16, 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

gravatar
Mohamed Rias
on September 16, 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

gravatar
J
on September 16, 2008 at 8:40 AM  

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

gravatar
Wendy (Sweetie)
on September 24, 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 www.swishersweetie.com

gravatar
Wendy (Sweetie)
on September 24, 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

gravatar
Wendy (Sweetie)
on September 24, 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.

gravatar
Bro Chan
on September 29, 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.

gravatar
Danny
on October 6, 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?

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

gravatar
Doug Cloud
on October 8, 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.

gravatar
Doug Cloud
on October 8, 2008 at 10:41 AM  

Is anyone here?

gravatar
Mohamed Rias
on October 8, 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

gravatar
Anonymous
on October 11, 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)

gravatar
Deepa
on October 11, 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.

gravatar
Rafiq Raja
on October 15, 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.

gravatar
Typhoon
on October 15, 2008 at 5:40 AM  

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

gravatar
Pavel
on October 21, 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

gravatar
Anonymous
on October 24, 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

gravatar
Deepa
on November 5, 2008 at 3: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

gravatar
drwiz
on November 9, 2008 at 1: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

gravatar
Krishna
on November 13, 2008 at 6:27 PM  

awesome boss worked for me

gravatar
Shafar
on November 16, 2008 at 3: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

gravatar
Unknown
on November 23, 2008 at 8: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

gravatar
mackenzy
on December 5, 2008 at 7:53 AM  

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

gravatar
Shaid
on December 7, 2008 at 1: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

gravatar
Anonymous
on December 29, 2008 at 10: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

gravatar
Anonymous
on January 10, 2009 at 3:29 PM  

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

gravatar
Anonymous
on January 14, 2009 at 2: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

gravatar
The sword
on January 14, 2009 at 3:30 PM  

thanx for inf

http://egyphoto.blogspot.com/

gravatar
Anonymous
on January 21, 2009 at 3: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?

gravatar
Jasa Website
on January 25, 2009 at 3: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

gravatar
Unknown
on February 1, 2009 at 10: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)

gravatar
Unknown
on February 9, 2009 at 12: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

gravatar
P.K.ARUN
on February 21, 2009 at 8: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

gravatar
SYED MUBALLIGH
on February 27, 2009 at 6: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: www.tricksystem.com

my email: syedmuballigh@yahoo.com

gravatar
Ravi Kuntamukkala
on March 4, 2009 at 3:40 AM  

Not Working !!
Please Check My Template

www.networkzindia.com

gravatar
Amol
on March 11, 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.

gravatar
Stone-Cold Angel
on March 12, 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.

gravatar
None
on March 13, 2009 at 3:21 PM  

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

gravatar
Vik
on March 15, 2009 at 9:48 AM  

Not working :(

gravatar
ALLAL
on March 17, 2009 at 12:22 PM  
This comment has been removed by the author.
gravatar
ALLAL
on March 17, 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

gravatar
GarajimdakiEjder
on April 1, 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?

gravatar
rashiD
on April 12, 2009 at 1:04 AM  

thanks Rias..
it's working..
love it..

gravatar
Daniel
on May 2, 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

gravatar
T1Q-NO
on May 17, 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

gravatar
Anonymous
on May 17, 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

gravatar
Anonymous
on May 18, 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

gravatar
Mohamed Rias
on May 18, 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

gravatar
Anonymous
on May 19, 2009 at 8:24 PM  

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

gravatar
Anonymous
on May 21, 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

gravatar
Q'noy
on June 1, 2009 at 10:01 AM  

cool, thanks
but i still get duplicate post

gravatar
mnkt
on June 4, 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 ...

Post a Comment

Custom Search
Web Analytics