You’ve probably been to some blogs and noticed related posts shown beneath each posts. This is definitely one of the hacks you must do on your blog. Why? It’s one of the little ways to keep your visitors busy and longer on your blog.
You first need to download this file.
You should upload it to a reliable file host like opendrive.com. The one I uploaded is ok and you can use it anyway but I only suggest you should have a backup somewhere and use your own url. Like I said earlier, it’s ok to use the deault javascript in the code.
1. Login to your blogger account
2. Go to design and click on “edit html”
3. Check “expand widget template”
4. Press CTRL + F and find
5. Now, in the line before this, copy and paste the following code:
<!--RelatedPostsStarts-->
<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://www.gigaimage.com/images/brrl1rtaziisu0yj6kj6.gif") 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 src='http://caprio.googlecode.com/files/related_posts_for_bloggers.js' type='text/javascript'/><!--RelatedPostsStops-->
6. Now search for this code
7. Just after this line, paste the code below
<!--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'><data:label.name/><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-->
8. Now save your template.
You should now see related posts under your blog posts.
IF YOU ARE USING A MAGAZINE STYLE TEMPLATE OR YOU’VE DONE THE “READ MORE” HACK ON YOUR TEMPLATE, YOU MIGHT HAVE MORE THAN ONE “data:post.body” IN YOUR TEMPLATE. TRY THE FIRST OR SECOND, WHICHEVER WORKS FOR YOU.
If you’re still confused about the right <data:post.body/> to use, search for this code instead:
<div class='post-footer-line post-footer-line-2'/>Paste the code right below this.
Please note that nothing will be shown if you do not add labels to your blog posts when publishing!
well, i will definitely make a try for RELATED POSTS. i'll comment again when i done it.
Regards,
Firefox Tips,Iphone Tips,Laptop Tips
am going to make use of this related post for ma blog
etisalat free downloading cheat for mobile phones
thanks Doncaprio for this,now i've successfully add related post widgets to this blog
http://www.entertainmentgistme.blogspot.com
thanks for This great post.
Glad to know it worked for you
Twitter: daayur
says:
its works perfectly on http://www.earnonlineng.com, guy this is great.
Twitter: Globalwalyy
says:
can i still make use of ur upload js…i just wanna know if its still working
globalwalyy recently posted..What is Twitter and How Important Twitter is to your business
yes, it is.
THANK YOU DON COPRIO THIS IS VERY USEFUL FOR ME AND THANKS FOR SHARING THIS WITH US
Thanks again For This one bro
I uploaded My Js Instead and i used opendrive
I even edited it
Check it out on
http://techdaybook.blogspot.com
Derek recently posted..2Face Becomes a Father Again…
Related post makes your readers to stay longer in your site,and also reduces bounce rate….Thanks for sharing this experience
Thank for this lovely widget.
http://nairacareer.com
Twitter: omodico
says:
do you have any idea that your a legend? thanks and God bless caprio
Twitter: teckopforu
says:
nice and good post…can you visit my blog http://teckop.blogspot.in/ i want to apply for adsense so…if you can see any errors then reply me please…thank you
Your blog looks very much well-designed. Hope you get approved.
Twitter: teckopforu
says:
thank you…@
Hope i got approved fast but an error is occurring all the time from Google adsense saying “program policy”
Teckop recently posted..Best Top 10 Mobile Phone Companies Around The World
Twitter: oscarfranky
says:
Quite cool and interesting. Thanks anyway.
Twitter: dotun4luv09
says:
Thank you don but it is not working on my blog,any help?
ADESANMI ADEDOTUN recently posted..How to achieve the effect of flipping 3D eBook in 3D space.
Twitter: JamiuOloyede
says:
@Don, this tutorial is awesome. Some bloggers would find it handy for use on their blogs. Thanks for the tut.