Wednesday, April 13, 2011

How to Add Related Post link to your blog (Blogger)

How to add Simple Related post link to your blog.



Related Post link increase number of your page loading.If someone interest in your link ,he or she visit that page.In this way we can increase our page loading.

In this post we discuss about a simple Related Post Link for blogspot blogs.

1.Goto Design---->Edit HTML

2.Find </head&gt; tag

3.Place this code above "</head>"

<style>#related-posts {float:left; width : 475px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 14px 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 { font-size : 14px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("http://1.bp.blogspot.com/-vcbCme7rMTw/TZEU-rnpibI/AAAAAAAAAiE/YtY9ovqoTOw/s1600/redlogoo.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #333; } </style>
<script src='http://chocodot.googlecode.com/files/related_posts.js' type='text/javascript'/>

4.Find "<div class='post-footer-line post-footer-line-1'>" or "<data:post.body/>"

Then place this code below "<div class='post-footer-line post-footer-line-1'>" or "<data:post.body/>"

code:

<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=9"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

Explanations:

max-results=9

Max-result:Number of link you want to show

block; background : url("http://1.bp.blogspot.com/-vcbCme7rMTw/TZEU-rnpibI/AAAAAAAAAiE/YtY9ovqoTOw/s1600/redlogoo.png")

http://1.bp.blogspot.com/-vcbCme7rMTw/TZEU-rnpibI/AAAAAAAAAiE/YtY9ovqoTOw/s1600/redlogoo.png

Change this url with your logo url.For this ,just upload a image to your blog.After uploading select that image.Click on right mouse button and copy the "link location"


Example:

1.

<style>#related-posts {float:left; width : 475px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 14px 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 { font-size : 14px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("http://1.bp.blogspot.com/-vcbCme7rMTw/TZEU-rnpibI/AAAAAAAAAiE/YtY9ovqoTOw/s1600/redlogoo.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #333; } </style>
<script src='http://chocodot.googlecode.com/files/related_posts.js' type='text/javascript'/>
</head>


2.

<div class='post-footer-line post-footer-line-1'>
<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=9"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

Have any problem.Then comment your problems.

Get 10-50% offer on all purchace - Flipkart offer zone

31 comments:

Ahsan said...

I am searching like this RELATED post link for a long time. Now I got in your site. I hope it works. Thx for sharing

ccn said...

If you are looking for low cost web design services then Web Design CCN is the right choice for you. They provide free web templates, WordPress themes, os-commerce web templates, e-commerce templates, web solutions PSD to XHTML, Photoshop - actions, shapes, patterns, gradients and brushes with their web design services. Subscribe now http://www.webdesignccn.com for just $10 to and get all these resources.

Adam said...

Thanks. I hope this works

Adam said...

Will try this on http://bloggertricked.blogspot.com/ and check

7chip said...

What happended

Adam said...

I will try it once I get a new template. My current template looks nice but is very slow :(
Looking for a simple yet professional template!

7chip said...

Ok.Check my blog post.i publish 10 beautiful professional template.

http://www.7chip.com/2011/05/new-professional-blogger-templates.html

7chip said...

New Profeesional Blogger Templates

Adam said...

Well the template should also be very customizable and easy to handle so that most hacks work in it. I prefer a 3 column template to add more widgets

7chip said...

But.It is rare.Most of the Professional templates are 2 column.I also like 3 column.Try Bloggermint.com

Adam said...

Yes I too thought so. I got a simple template now. Please check and give your suggestion :)

Harry Seo said...

Felix Labs is a best Web design company india, providing top flash web design services, website development services and 3d animation services. Get high quality website development and web design services from the experts.

Harry Seo said...

Felix Labs is a best Web design company india, providing top flash web design services, website development services and 3d animation services. Get high quality website development and web design services from the experts.

Adam said...

Well the template should also be very customizable and easy to handle so that most hacks work in it. I prefer a 3 column template to add more widgets

7chip said...

Ok.Check my blog post.i publish 10 beautiful professional template.

http://www.7chip.com/2011/05/new-professional-blogger-templates.html

Adam said...

Will try this on http://bloggertricked.blogspot.com/ and check

ccn said...

If you are looking for low cost web design services then Web Design CCN is the right choice for you. They provide free web templates, WordPress themes, os-commerce web templates, e-commerce templates, web solutions PSD to XHTML, Photoshop - actions, shapes, patterns, gradients and brushes with their web design services. Subscribe now http://www.webdesignccn.com for just $10 to and get all these resources.

danykhan said...

nice share this related posts widget fits great on my blog

danykhan said...

can some one tell me how to add this comment box to site??

Magento developers said...

This coding shows error in my blog. can you able to rectify that. 

Alexis Bob said...

Although not a must, most good quality blogs are interactive, allowing visitors to leave comments and even message each other via GUI widgets on the blogs and it is this interactivity that distinguishes them from other static websites. In that sense, blogging can be seen as a form of social networking. Indeed, bloggers do not only produce content to post on their blogs but also build social relations with their readers and other bloggers.

web design halifax | website design halifax | web design company

Anonymous said...

Greetings! This is my first visit to your blog! We
are a collection of volunteers and starting a new initiative in a community in the same niche.
Your blog provided us beneficial information to work on.
You have done a extraordinary job!
Here is my web-site ; Learn More

Anonymous said...

Hi Dear, are you genuinely visiting this site
regularly, if so then you will without doubt get
good knowledge.
my web site > homes for sale in weslaco tx

sonia said...

your site is very good man.i have seen it and i visit it daily..i will add this on my site...you can see it..

Dunyia Pakistan
Dunyia Pakistan
Dunyia Pakistan
Dunyia Pakistan

like it

New look

talat rizwan said...

cheak this seo post http://talatrizwan.blogspot.com/2012/09/major-key-points-of-future-seo.html

Diamant Sallahu said...

this doesn't work its says callback mund end with delimiter ','

sibin xavier said...

try your self i forgot all codes.I wrote this post a year ago.Check your codes and apply it again

Anderson said...

Hi its quit awesome post friend thanks for sharing this ... and those will indicate you as thumbnail??

Web development Company said...

This is better than other sites.Always so interesting to visit your site.What a great info, thank you for sharing. this will help me so much in my learning.

Anshika patel said...

Software development (also known as application development, software design, designing software, software application development, enterprise application development, or platform development) is the development of a software product.
web development company

sonu said...

Thanks for sharing Software development company

 

Copyright @ 2013 7CHIP.

Designed by Templateify & Sponsored By Twigplay