
Related Posts Widget for Blogger v1
The related posts widget will show a new related posts section below your post.The related posts widget fetches the related posts from those posts having the same label as the current post.
To implement the related posts widget you will have to follow 2 simple replacement steps.
1.Login to your blogger account and get into your Dashboard
2.From there go to Layout > Edit HTML and expand your widget templates(option on the right)
3.Now find this line of code
</head>
and replace it with
<!--Related Posts Scripts and Styles Start--> <!--Remove--><b:if cond='data:blog.pageType == "item"'> <style type="text/css"> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts .widget{ padding-left:6px; margin-bottom:10px; } #related-posts .widget h2, #related-posts h2{ font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, “Times New Roman”, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ color:blue; } #related-posts a:hover{ color:blue; } #related-posts ul{ list-style-type:none; margin:0 0 0px 0; padding:0px; text-decoration:bold; font-size:15px; text-color:#000000 } #related-posts ul li{ background:transparent url(/_u4gySN2ZgqE/snzhv_c6bti/greentickbullet.png) no-repeat ; display:block; list-style-type:none; margin-bottom: 13px; padding-left: 30px; padding-top:0px;} </style> <script type='text/javascript'> var relatedpoststitle="Related Posts"; </script> <script src='...' type='text/javascript'/> <!--Remove--></b:if> <!--Related Posts Scripts and Styles End--> </head>
If you want to change the title of your widget you can edit this line of the above code
var relatedpoststitle="Related Posts";
If you want you can edit the blue and black colors present in this code
4.Now find this line of code
<div class='post-footer-line post-footer-line-1'>
If you cant find it then try finding this one
<p class='post-footer-line post-footer-line-1'>
Now immediately after any of these lines(whichever you could find) place this code snippet
<!-- Related Posts Code Start--> <!--Remove--><b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/summary/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='related-posts-for-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget for Blogger" src="..." /></a> <script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script> </div> <!--Remove--></b:if>
the below line of code determines the number of related posts that are displayed and by default 6 posts are fetched from each label.
var maxresults=5;
Now you should have a working related posts widget on your blog.If you want to customize the look and feel,then you can alter the CSS rules.OR if you have any doubts or need any modifications,you can surely contact me via comments or at Blogger Forums .The codes are well commented .So this can be easily removed whenever you want..
Note: If you want to display the Related Posts on every page, then remove the 4 lines of code starting with <!--Remove—>
Update 29/03 : If the script is not working anymore, do change
Sorry for the trouble :-)
appaa
yes this is indeed a better version of this hack
Thanks a lot, my blog looks so professional now. Take care and keep us updated!
Anshul
is there any demo..??
@sam this is my example ;) enjoy
@ipsj ,
you have added the first part of the code..
but i dont think you added the second part of the code..
i dont see any related post code below
<p class='post-footer-line post-footer-line-1'>
i don't know why my blog do not appears on google search, anyone of you help me on this
hmm...i'll try thnxs bro
hi aneesh! nice article. I did apply your tip to my blog. Windows Technology Blog But I want to reduce the spacing between the posts urls, how can i do that?
in #related-posts ul li
there is a line
margin-bottom:somevalue;
Adjust it so that the gap is set to what you need.
hi aneesh, thanks. I already tried that one, but I couldn't find any difference. Then when I made it to 3px, i could find the difference. thanks for your help!!
Thanks a lot
Beautiful widget!
let's join us to download ebook free
Hi, Aneesh.
Thanks a lot for this wonderful widget. It is excellent.
Also, the other widgets of this blog are quite good too. Specially, I like the way how the readers can customize some of the widgets (Pop-out on clicking on a button)
Good work again!
Regards,
Viral
@Viral
thanks for the appreciation! :)
Hi,
I have added the code to my blog and it hasn't worked. Any ideas?
Thanks
its working fine on that page that you have mentioned..If you are talking of that No Image thumbnail,it is the default thumbnail which will be displayed if no images are present in that particular related post(no images uploaded via blogger post editor).
hi,
it didn't work on my blog and i don'know why,could you help me :)
by the way i forgot write my blog url :)
don't work
Okay, I tried this one instead of the one with thumbnails and it shows links to other posts that don't necessarily relate to the post a visitor is commenting on.
But, at least it shows something and that's an improvement.
The only problem I still have with it is that the related links do NOT show up on the main page or the post's page. They only show up if someone clicks to make a comment. Is that how it's supposed to work?
both of the codes have b:if conditions.. these b:if conditions were added to prevent the related posts from being shown on the main pages..
if you remove the b:if conditions from both the code snippets,then the related posts will appear on every page..
b:if conditions look like
<b:if cond='data:blog.pageType == "item"'>
and
</b:if>
thanks good wisget :)
How come images don't appear in my related posts? Thanks!
Much better than the one from LinkWithin!!
Hye.. i already install this code on my blog.. This related post actually work on my previous post.. But, when i install disqus comment box on my blog, the related post never showed again.. Whats is the problem actually ? can u help me ?
Regards,
Zaarz
@ZaaRz did you upload the template to disqus for inseting the comment form.. if thats the case they might have removed some codes.. Try adding it again.. By the way i see the related posts with thumbnails working on your blog now..
I have followed the instructions but it doesn't seem to work for me, any ideas?
Hi,
I tried this but it wont work on my blog
I have this error: TEMPLATE ERROR: No dictionary named: 'post' in: ['blog']
Any ideas? please help
@Me ,
i don't see the codes on your blog..
@mogo cafe ,
now its working fine on your blog.
Thank you very much! I have been looking for this feature in an easy to use format for Blogger and this is it.
I added the hack and it did not work...
I am puzzled. Grateful for any help
Thanks
Thank you
Awesome. Thanks!
Hi Aneesh!
I cannot seem to find any of the footer lines. Any alternatives for my problem?
Thanks!
it's work, but i have one problem... it's closed by post label, time, and disqus.. please help me solving this problem
hi... i try this but i stop in this 4.Now find this line of code
i did not find any code like this
help please
Thank you very much. Those codes works just fine for my blog. If you don't mind, I'd like to ask you to review it too. Since I'm new to blogger's things.
Based on Minima template.
How can I change the font in those related post?
@irwanwr ,
you can add your own font styles to the CSS
thankz
thank you verry much.
Hi, I love this and it's working fine on my blog! Can you tell me how to change the bullets for each related post from that green arrow to something more like you have on this site?
Thanks!
One more question...
I can't seem to figure out how to increase the space between the bottom of the related posts and the top of my labels? I would like a little more space there.
Thanks for your reply!
@Rebecca
you can change the bullet image by changing with the url of your bullet image..
You can add spacing
just below #related-posts {
add,
margin-bottom:10px;
Aneesh,
Those adjustments were SO easy and worked like a charm!
Much appreciated.
Rebecca :-)
bagus friend tips-nya
Great Job.
how to place this widget (Related Posts) belom the Adsense Code located between posting? this original code always place Related Posts above the Adsense. i need it to place Related post below Adsense. please refer to my blog
try placing the code from step 4 just above <div class='blog-pager' id='blog-pager'>
Hi,
Installed the code on my blog. I see the related posts immediately after publishing then they disappear. Can't figure out what I'm doing wrong. If you could take a look, I would appreciate it.
Thanks.
Thank you very much for the code. It works perfectly in my blog!
G'day, firstly thanks for the widget, secondly, how does a non technically minded person change the font of the 'related posts' links? My site is all in Georgia, can I change the font?
Working perfectly on posts but not showing in homepage andy help?
Wow, great! I'll try!
Thanks a lot.
Well explained tutorial
Thanks, worked like a charm.
Thank you so much, check out what it looks like now!
Once question, why does it not say "Related Posts" on all of my posts?
hello Aneesh
how can i change the blackground color to black?
Hi!
It's not working for me, any ideas?
Thanks
so many way to hack the code and i really confuse where is the best from all. I think wordpress is easier than blogspot but somehow blogspot is more freely to use that wordpress.
Works like magic... I've been looking for this since last year... I edited the css and removed the tiny image and it looks wonderful. I'm using it on my blog already. Thanks a lot. God bless.
Hi, how to place this related posts at the bottom of my post and not on top? thanks.
I tried to apply but it can't. Is there any to add as HTML/JavaScript widget
cool. tks a lot
Thanks, a lot . Tried many of similar posts hacks but this one worked on my blog
I hope I followed your steps, but doesn't seems to work. Could you please help me.
@Priya its working now :)
i couldn't find the second line. Please do help me. Thank u:)
It works but why the title "related posts" doesn't show up. Is it related with the code var relatedpoststitle="Related Posts"; that automatically changes into var relatedpoststitle="Related Posts";. How to fix it?
@Shalini Subramaniam - Then try placing it after <data:post.body/>
hiya! this doesn't work with me, i've followed all the steps. and when i want it to start fresh it doesn't go back to the original template, any idea what's going on?
zam said...
It works but why the title "related posts" doesn't show up. Is it related with the code var relatedpoststitle="Related Posts"; that automatically changes into var relatedpoststitle="Related Posts";. How to fix it?
Same problem as Zam...any solutions?
My Problem same with Zam and Booty Bandit.. How to fix it ?
@All - Can you show me the url.. I am using the same code here on this site. with a little different styling..
hi ...
if i want the related post to show "posts that have the same titel"
ex: 1. ligion review 2. ligion preview 3. ligion Mp3 4. ligion "in make".
so if the post is about ligion mp3.
can the related post show, the other 3 posts as releated post?
@Bollytadka - nope realted posts are based on labels. If all of those posts have the same label, then they may come up.
thx aneesh
thank
i have included the parts of code in my website but it still don't work :(
anybody can help me to fix it right?
Thanks for the info. It worked.
Seems like 20 is the maximum amount for related posts. Is there anyway to increase that amount? Also is it possible to arrange the related posts in chronological order? I want the newest ones to be on top.
nothing happen??
Thank you :) I tryied some widget's like this too, but they aren't work.
Your widget's really work. You are great :)
What if I can't find the second part of the code?
I use someone's template, and there is no
class='post-footer-line post-footer-line-1
or
p class='post-footer-line post-footer-line-1
Thanks
hi!
can you please check why it's not working, i will be so greatful.
can you please help me.... I have successfully save the template but it seems nothings happens. please check my site...
pls check myu blog. its not working'
Fantastic widget, thanks so much!
I also faced the same problems
Okay,I want the related posts to show on every post on every page. I followed the instructions in the above post. Took out all the b:if conditions from both code snippets, got div needs to be closed. added /div, still did not work. Took out just part of b:if and get loop needs same termination.
Can you please advise me as to what lines I should exactly remove to have this occur on each page? Thank you. I like the way it looks on opening a post.
i use custom domain with blogger i tried this code it just dont work any idea
It's quite complicated to do it, but great tips... thanks
Hi,
I tried this but it wont work on my blog
I have this error: TEMPLATE ERROR: No dictionary named: 'post' in: ['blog']
Any ideas? please help
hi
I tried this but it wont work on my blog
@photoshopya - related posts are based on labels. So you need to label your posts. and it would be better if you use the "related posts with thumbnails widget". (as you have images in your blog posts)
Its doesn't work on my blog.
:(
@Caroline Ng May Lin - you have added the code twice(one is slightly different though) to your blog. Remove both of them and re add :)
i did it, still not working on page.
@Caroline - thats because each of your labels have a single post only. Related Posts = Posts under the same label.
Hi,
I have this error: TEMPLATE ERROR: No dictionary named: 'post' in: ['blog']
Any ideas? please help
Derk Zijlker
@derkzijlker - add the big code of step 4 below <data:post.body/>
Btw you already own a domain name. you can move your blog to some sub-domain like if you want :) . You will find the instructions for the same on this blog :)
I try to my blog.But I don't look change and can't see related post.Why...what happend?
i dont know why i get ths error
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 "html" must be terminated by the matching end-tag "".
im using a custom template, if that matters.
thank for information. It's nice :)
Hi Aneesh, thnx for your help. But I still don't know how to fix the problem.
TEMPLATE ERROR: No dictionary named: 'post' in: ['blog']
Can't find in my template.
Can you help me fix this error?
THANKS
Derk Zijlker
Instead Of "Related Posts" I want it to appear as "You Might Also Like" how do I change this text ?
Thanks a Lot for all the help and Tips :)
@Sagar - you will find the answer in Step 3 :)
@Sagar, also check out here.
all codes are working fine
but i am getting a problem that title "Related posts" is not appearing at my site
here is demo
plz help me
thank you very much dear i have made it as your instructions.
here you may see it.
again thanks.
it gives professional look to my blog.
Thanks a lot from Venezuela. This widget works perfectly!!
Nice day for you. Very exciting widget...
Thanks for this nice widget...
I have completely removed the bullets and change text color, size and face. Now it's looking really Excellent. Please see my blog here
Oh well, this one didn't work as well, as I'm no good with CSS, or CCS? heh
Is it hard to make a widget that "catches" the look of one's blog? Like, identifying colors and fonts?
Hmm. Seems rather complicated. But thanks anyway for sharing this. :)
thanks for very nice widget .
Thanks a lot
I complate my blog:
Everything seems to be working except the images do not show in the related posts. I am new to Blogger so maybe I have overlooked something. I was also wondering if there was a way to assign an image to a post, without having to place in right in my post. Meaning I would like to see the image on the related posts but not in the middle of the post once I go to it.
If you have a chance could you check this out? Thanks.
nice! i'm currently using it now. thanks :)
Hey Nice Post! I will be working on this in my Blog, ASAP!
Tell me what you feel! :)
Thanks, this is so easy and it worked perfectly when I first put it in. But I changed templates and added this again, it just shows the title but not the images. Help please.
Never mind, I just found your other post, :). Thanks!
Hi again since Blogger error BX -...
I followed all the steps and I'm wondering what goes wrong. Read all comments but I am more confused that in the begging
I'd really solve the problem because I'm really interested to have a "realted post" widget
Forgot to mention my blog:)
It works! I can erase the old comments, so feel free to delete them.
I'm soo happy now!
wont work on my blog
Not working in my Blog
Help!
Hey,
the Related Posts title does not show when there is only one related post. How do you fix this?
Why doesn't the title show up when there is only one related post?
:(
The element type "html" must be terminated by the matching end-tag "".
I followed all the steps and I'm wondering what goes wrong.
my related post became wierd..
please advice..
i need help its not working
hey plzz help me its not working for my blog
hello, Aneesh
I love your hacks and I used the one with the page counter. this one doesn't work cause I can't find the second line of html code in step 4.
please help me
hugz
oops, I forgot this:
hi annie,
try finding <data:post.body/> instead. and paste the code below it.
Hey :)
I put this widget on my blog but I don´t want it to be in this light blue thing under the posts. How can I change that?
Greetings,
Carry
i have used the widget but having no thumbnail !
can i have ur help?
u R d best
ItS woRkiNg...
great work.thanks dude..
working for me.
Hi,
Its shown on my site now :)
thanks
it works inside my post..how about displaying it on the image..i removed the line starting with and i could see only 4 thumbnails instead of 6..please help
Great post!!
I have a question. I have successfully used this on my blog but is there a way to display this widget below the read more "jump links" on the index and archive pages? I couldn't figure out how to do this.
I copied the code and pasted it underneath the jump link code and tried using "archive" and "index" in the if condition for data:blog.pageType but it doesn't display anything.
Any suggestion will be greatly appreciated.
This is a cool Realated post widget....
Now my blog look stylish after adding it.....
How do you put a border around it!
It was helpful. Thank a lot =)
It looks better now =)
I am so happy =)))
super, thanks a lot, I was looking for it for many days!!
Wonderful addition to my blog! Your tutorial is just perfect and you've shared many clues in your response to comments that helped in restyling it as I wish.
Thank you so much for this awesome Related Posts Widget, Aneesh!
God bless you for your generosity.
Cool enough.. :^) i mean it's great except that i can't find a solution to customize it, some style seems locked from the script, i don't know..
hey plzz help me its not working for my blog
Only Related Posts Heading is coming under that no posts are coming
Please once check my blog
please its very urgent for me
hey plzz help me its not working for my blog
Only Related Posts Heading is coming under that no posts are coming
Please once check my blog
please its very urgent for me
thanks! this one worked on mine lol dunno how to italicize the posts though like yours ^^
Hi Aneesh,
How do you remove the line separating the related posts (instead of adding the space between the lines)?
Thanks in advance!
hi admin ...
how to add "you might also like" widget like your ??
its so beautiful..
please notice me via email..
thanks before
:)
not working for me .. i m using langit template in which i haven't found post footer line 1 ,, it has line 2 or line 3...please guide me..
Oh never mind. I have found out how to remove the lines. You just need to remove border-top 1px dashed-lines from #ArchiveList ul.flat li.
@statryacode: change the "Related Posts" into "You Might Also Like" from "var relatedpoststitle="Related Posts";"
@vikram: if you give your site link, I can help. Just search for the words like 'footer' near the end of your CSS.
Thank you very much for your widget. It work on my blog
Looks Great! Gonna Try it. Thanks in advance
Ikhsan
Thank You,Its working. Best so far I had tried
hy bro thanks for this
but you add this code also bcoz some tamplate have this option
my own also like this. stip one is okay but the step 2 past here
"Step 2"
I removed the b: tags as indicated in the above comments, but the related posts are still not showing on the main page. Could you please advise? Thanks!
Great Post! This is going to be very helpful for every blogger
Arigato! :D
Hi, it doesn't work on my site, could you please check, I have followed both the steps.
nice widget working on my blog
i like this, thanks be4. but related articles on my blog goes wrong, usually there but now even to disappear. why ?
nice post. thanks be4
angga
Mantap... I have just implemented on my new blogspot Thanks for this very helpful post :) Merdeka!!!
thanks you very much for this widget/plugin
thank's, awesome article. i want to try this at my blog :)
I have use this code but I face some problem so can you please solve out this.
Hello, I would like to ask for the code on how to add some thumbnail for each related link or post when listed. Thank you. :)
I want to say just a word "Awesome". Thanks.
It works! Thank you
i have followed your instructions.
but this is not working for my blog..
could u please help me in this regard.
you reply is most valuable to me..
thanks alot, this post helped me alot :)
Your widget does not seem to work in my blog. I would be grateful if you could have a look. Thanks in advance.
hello..its not working on my blog....
help me..
Hey thank you! it works well on my blog , i just needed to remove the green tick, and i did It works well. thank you for the help :)
Thank you for the widget.
thanks for the information! I want to ask? how do I change the color of the letters in the related posts are displayed? from blue to black as well as letters from the "Arial"? Thank you.
this shit doesnt work
Great!! Now, I've had new related posts...
Thanks a lot...
That is so great! thanks a lot!
thank you very much! it's working!!
how to put this widget in sidebar?
Installed the code on my blog. I see the related posts immediately after publishing then they disappear. Can't figure out what I'm doing wrong. If you could take a look, I would appreciate it.
Thanks.
Hi there,
I've tried implementing this widget into my blog but it's not showing at all. Have followed directions and have added both parts of the code.
My blog here:
Any help is appreciated :)
hiAness, can you please check why it's not working, i will be so greatful
Hi, this isnt working for my blog either :(
hey... i applied the whole procedure but the widget is not being shown. the template was saved successfully. but the related posts are not shown. Can you help me here?
the blog
waiting for your response.....
This is such a treat and so easy! Love love love love it thx!!
Check out my personalization :P
Cheers all,
hey... i applied the whole procedure but the widget is not being shown. my minima template was saved successfully. but the related posts are not shown. Can you help me here?
the blog
waiting for your response.....
tnx in advance
Is there a way to block posts with certain words in their title from appearing? I post weekly to-do lists on my blog but I don't want them appearing in the related posts section.
I wish I could hug you. You are truly the best. Thanks for all that you do! :)
That's wonderful ! I'm using on my blog. Thanks you very much !
@HHJ-Rauney,ITechMaz - thanks for the kind words.
thank you......
Thank you very much iam using this widget for my blog.
it is very useful and helpful once again thank you
It really works!!, very nice and very clean!!!!!
if you want to see it working nice.
Thank you for this! I used it before and it worked... but after I changed my template and put this code in again it's not working any more! The two posts on the side have the same labels... Please help me!
May be i`am late to see this articles, but really thanks to the author