How to Show Related Posts in Blogspot Blog

Wednesday, December 03, 2008
Posted by Takumi 86


Related Post

Ever wonder how you can display related post in every blog post? You probably have seen this on high traffic site. But why does this tips really can benefit you is because it has more advantage as people can actually view more of your blog post and spend more time on your blog. Thanks to RealTix for showing you how its really possible to create related post.

1. Go to your Dashboard Layout, click on Edit HTML and check the "Expand widget codes" box, add the below code before tags

[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://i299.photobucket.com/albums/mm297/zozuglogger/weed-bullet.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://technotrixdebajyoti.googlepages.com/RelatedPostsByRealtrix.co.cc.js' type='text/javascript'/>

2. Find these lines: [p>[data:post.body/>[/p>

[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: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>

3. Save your template and you are done

Question?
So how big is this tips can go so far?

Answer
This tips allows your reader to digg more of your blog post, so there is a chance that your blog could get more exposure and viewers. And most of popular blog has perform this trick which helping them a lot in improving their traffic.

If you're facing any problem to load the JS files, then try to replace http://technotrixdebajyoti.googlepages.com/RelatedPostsByRealtrix.co.cc.js with this one: http://holdingforahero.bravehost.com/RelatedPosts.js



Attention! To make the works, please replace [ with <



If you like my post, please subscribe to my RSS feed!



Labels:

0 comments:


1. This blog is DoFollow
2. If you like my post, please leave your review and i'll appreciate that and do not spam, Thanks


Post a Comment