Log in into blogger with your ID
Click Layout
Click EDIT HTML tab
Click Download Full template. Please back up your template first
Give a mark next to Expand Widget
Press Ctrl+F
Step 1 : Add the following css before ]]></b:skin> .
#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://4.bp.blogspot.com/_v5IxGTiMTD8/S86tvMfnwNI/AAAAAAAABCo/L5mp8kwzf0I/s400/listarrow.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;
}
Now search for <head> tag and add the below script before it.
<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 : Check expand widgets and search for <data:post.body/>
And place the below codes just after it:-
<!--RELATED-POSTS-STARTS--><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts: </b></font><font color='#FFFFFF'><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/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if><!--RELATED-POSTS-STOPS-->
Edit the number in green in above codes to show how many related posts you want to show.
Now save your template.I hope this will work great for you.
Source:-Techiblogger
54 comments:
Followed your directions and nothing happened. Hmmm...
Great site!
http://www.askbabykid.com/
Is working fine buddy check it again...
this is not working
okies friend i have edited the posts its working now and check second way if tried first...
After getting it open this link and copy the codes from here.
the page cannot be found
:(
Thanx Friend For informing i have uploaded the script page again its available now.
Hi there!
This is working nicely on my site (www.muziekvragen.nl). I have one little issue though. One of my labels is "intro's", with an apostrophe in there. When in a post with this label, the related posts label is displayed as "Intro%27s", so with html coding in it. Do you have any suggestions on how to bypass this? Thanks.
Dennis
I checked your blog all categories have one post no related posts coming so can't check..
Hi Anshul,
If you look at the separate post page (http://www.muziekvragen.nl/2009/03/popvraag-004-intros.html), you can see the widget shows even though it has no related posts to show.
You'll find it below the post where it says "Speel meer vragen uit deze categorie!" and below that the category name without the posts.
Regards,
Dennis
Hi Anshul, you have a great blog. I tried using related posts widgets on my blog but it doesn't work. I tried the first method it didn't work so I tried the second one but even that doesn't work. Can u please help me. My blog URL: http://dreamhomeforu.blogspot.com/
Thanks and regards
Sukanya
Its working fine sukanya in your blog i checked.
Thanks Anshul....I didnt know u have to click on the post to see the related posts.
HI Anshul
use the first way ,how to do control of the many post?
and how to hide label display?
thanks
The script you have copied from 1st method open it
and Remove this line <h3>Related Posts :</h3> from script to hide written related posts text.
And find this line in script maxNumberOfPostsPerLabel = 100;
and change 100 to number of posts you want to display.
Hey Anshul
The second method worked like a dream:)
But the related posts shows the original post along with others. Is it possible to tweak it so that it shows all other posts and not the post which is being viewed?
I hope that made sense:) Please clarify.
http://boxingwords.blogspot.com/
Ya friend as the script is extracting related posts on basis of category and its shows all post of that category and same posts also comes in the list.You can only select how many posts you want to show,the post will always come in related post also,and i dont think its an big problem if you are having many posts in one category.
Hi! I have the "read more" function but I am not using it. I tried method two but it's not working. I attempted method one but the link "open this link" shows nothing. Any suggestions? Take Care, Peter
My site: http://stvincentsdarlinghurstmalenurses.blogspot.com/
Ya if you are using read more function the code data:post.body/ you are finding i have told you in red in second method will come twice in your blog.Please add the codes after the second one.
hi Anshul
thank reply :)
but i want to hide 'label' text display
not hide 'Related Posts' text
because this hack not support chinese label display
so i want hide it :)
================
you can to come my blog see see ?
for example this link
http://free2sw4u.blogspot.com/2009/04/web-20-tools-main-page-update.html
label place display
%E7%B7%9A%E4%B8%8A%E5%B7%A5%E5%85%B7
because this label is chinese
i have to make changes in the javascript for it when i will get time i will upload and let you know.
hi Anshul
OH :) thank you very much !
I'm look forward to fix it
thanks！
anyway b4 i'm look and to try hack this javascript,
must maybe below code﹕
textLabel =
but can't hide or change ....
now i'm waiting for you NEW waiting :D
Just what I needed. Great site and great instructions.
Hi Anshul
thnx for this hack but i think it doesnt work properly as i selected max-results=5 but it shows more than 5 relate dposts (all the posts in the same category ) (>5!!) what i should fix please?
No friend its show as yoou select me too using it.
sorry?
well i put 5 as max num results but it shows more than 5!! you can check my blog & same for your blog its more than 5!
Sorry friend i dont know your blog url and i am using 20 posts not 5 thats why my widget showing 20.
I did it both ways and doesn't work either way.
Help please
@ ripp i made slite change in method two do try again now and if still have problem try adding in other ways as rias has told as you can see his link at last of my thi post,he has mentioned 2 more different ways try them.
thanks yaar its working
i tried to write a turorial on 'Related post hack'(translation) but in the output (preview my post) the '&a m p ;' it s converted to & and whe someone tries this code with '&' he gets an 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 reference to entity "callback" must end with the ';' delimiter.
so my question how i could post a code without changing '&a m p ' (without space) to '&'.
Just make it correct from here encode or decode anything you like.
http://centricle.com/tools/html-entities/
Hi I am your regular visitor for the blog hack. I tried to hack the relate post to my blog it won't work for me. Please share your idea.
www.cambodia-angkortemple.blogspot.com
@sar its working fine as me stil using it.
Thanks, it's work fine to me
Hi Anshul
could u tell me how to make related post like ur blog? thank :)
@kelik its just same second method as i have exlained above , just what i have done is defined deifferent css with hover effect.
Hi Anshul,
Thanks for sharing this hack to us, i've tried it in my blog in it works wonders. It actually inspired me to do a little hacking myself. Recently, I developed a hack called "Relevant Post Hack with Thumbnail", the theory is the same as yours but mine allows users to displays image thumbnail too. Easy to implement which only requires short line of code.
Anyways, keep up the good work and always keep us updated with latest hacks
cheers
hi anshul, thankx for excellent work.I used this widget but not showing any result.
http://www.xhotnot.com
@xhotot you might have made some mistake.the template you are using would have three data.post.body just replace with right one.Or just try for all three if confused.
Check out this related posts widget by GOOGLE CUSTOM SEARCH and its one click installation :
http://www.vnoma.com/2009/12/related-posts-widget-by-google-custom.html
Hope you like it...
hi,i want to related post like yours.can u give plz?
@kaosar its just same hack to implement only chnage is i used own css make.Just implement same hack and use my css by taking it from source.
hi anshul
I am using your CSS and I find it very cool but I have a problem : next to "Related posts" there is tags in white. How can I delete it ? You can see it if you highlight the line of related posts.
Thanks
The hack is working great Anshul. But even though I have limited the number of posts to show as 5, it is still pulling all the posts in that specific tag. Now it looks a bit too bloated. Any help is much appreciated. You can check my blog here www.techdrivein.com
@i'admin i have updated the post
@rational you give more than one labels to post so it extract 5 from each label thats why it get increased.
Hey Anshul,
Kindly check out my Blog - http://swayamdas2010.blogspot.com/
It's one of your themes, so you will be able to help me better! I have been trying this 'Related Posts Hack' for quite some time now.. but all in vain!
Help me, Doc!
Help me, as soon as possible! :)
Sincerely,
Swayam Das.
Dude! Help ME! Your codes are not working in my Blog - http://swayamdas2010.blogspot.com/
@swayam in this template u using you will two data:post.body . So just try placing codes after both. One will work for u.
Okay, will try that out when I get time! By the way, your header content slider, that is, the one right on top of the Blog that displays various posts.. is taking a lot of time to start rolling.. and, if you visit my Blog, then you will see.. that because of it's javascripts, my AdBrite Ads are not loading up.. infact, I tried Twitter Status Updates Widget before... that failed too!
Can you suggest ways by which I can improve the loading time of each individual html widgets ??
I hope you got me, Buddy!
Sincerely,
Swayam
All right, Thanks! I finally did it! :) My 'Related Posts' are now working! :) Thanks Buddy!
Okay, now tell me, how to optimize my header featured content slider.. in such a way, so that my other javascript stuffs run smoothly.. like the 3rd party Ads, etc.. (Problem stated above)
Please help me Buddy! Counting on ya.. :)
Sincerely,
Swayam Das.
http://swayamdas2010.blogspot.com/
Hello
I have a problem, the related posts widget works correctly but as I have previously installed a series of buttons that directly drives to Facebook and all the others similar services, the title "Related Posts" of the listing is badly mixed with this line of buttons: could you suggest how to move a little bit down the "Related Posts" title and consequently the list of posts ?
Thanks in advance
@daniele ya there would be just some margin problems i saw it but when i tried to see your suorce codes and suggest u some chnage to do ,i cant bcz u using script to disable right click option.
hi!
I love this hack. However, my posts are linking to themselves as related posts. Can I prevent this?
Hello!
Thanks for the great hacks and templates. :)
Post a Comment