Tuesday, January 26, 2010

How to add related posts below every post

To add Related posts/Similar posts widget below every post on your blog, follow these simple steps:

First of all download this file:
relatedPosts_ForBlogger.js

Download here :  relatedPosts.rar


And upload the file (relatedPosts_ForBlogger2.js) to SigMirror.com or HotLinkFiles.com to get a DIRECT LINK to that file.

1. Go to Blogger.com
2. Now go to "Layout", then to "Edit HTML" section
3. Back up your present template, by "Downloading it"
4. Now click on "Expand widget templates"
5. Find this code: </head>


Now, just before this code paste this

<!--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://s2.sigmirror.com/files/53994_ysghv/Related%20post.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;
}

</style>
<script src='http://s2.sigmirror.com/files/53993_zbhwj/RelatedPosts_ForBlogger.js' type='text/javascript'/><!--RelatedPostsStops-->

Replace the link in RED with the DIRECT LINK, you got in the previous step.

6. Now search for this code line:

<data:post.body/>

And after this, paste these code lines

<!--RELATED-POSTS-STARTS--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if><!--RELATED-POSTS-STOPS-->

To change the number of similar/related posts to be displayed, change the code max-results=xx
Finally save your template, and you will see related posts after all your posts(Remember to add labels after your posts, during publishing them)

credit : bloggerstop.net





Reblog this post [with Zemanta]

4 comments:

  1. HotLinkFiles.com is unrelated to this topic. Is there another site that has a Direct Link to download? And the code printed, is incomplete at the ends:no-repe and type=.

    ReplyDelete
  2. I have to voice my love for your kindness for folks that absolutely need guidance on that subject. Your very own dedication to passing the solution across appears to be quite informative and has continually allowed guys much like me to realize their endeavors. Your own interesting advice denotes a great deal to me and even further to my colleagues. Many thanks; from everyone of us.

    ReplyDelete
  3. It does not appear on my homepage, it only appears when I click a link. http://okagbatek.blogspot.com

    I want it to appear at all pages. Thanks.

    ReplyDelete
  4. This is working absolutely on my blog htt://okagbatek.blogspot.com. But I would like to know how to change the links colour and size, and those of heading? Thank you.

    ReplyDelete