How to add related posts below every post
4/04/2010 09:16:00 AM
Posted by youme
To add Related posts/Similar posts widget below every post on your blog, follow these simple steps:
First of all download this file:
relatedPosts_ForBlogger2.js
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;
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://sigmirror.com/............/relatedPosts_ForBlogger2.js' type='text/javascript'/><!--RelatedPostsStops-->
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 == "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-->
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)
Tags:
Blogger,
Plugin,
Tutorial
This entry was posted on 4/04/2010 09:16:00 AM.You can leave a response, or trackback from your own site.
This entry was posted on 4/04/2010 09:16:00 AM.You can leave a response, or trackback from your own site.
Related Posts:
Blogger
,
Plugin
,
Tutorial
- Share this on del.icio.us
- Digg this!
- Stumble upon something good? Share it on StumbleUpon
- Share this on Reddit
- Add this to Google Bookmarks
- Tweet This!
- Share this on Facebook
- Share this on Mixx
- Subscribe
- Buzz up!
- Share this on Linkedin
- Submit this to DesignFloat
- Share this on Technorati
- Submit this to Script & Style
- Post this to MySpace
- Share this on Blinklist
- Share this on FriendFeed
- Seed this on Newsvine
Subscribe to:
Post Comments (Atom)
Post a Comment