Posted on 1:44 AM by Hamid and filed under
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:
Zipped File
And upload the file (relatedPosts_ForBlogger2.js) to SigMirror.com or HotLinkFiles.com to get a DIRECT LINK to that file.
- Go to Blogger.com
- Now go to "Layout", then to "Edit HTML" section
- Back up your present template, by "Downloading it"
- Now click on "Expand widget templates"
- 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://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://sigmirror.com/............/relatedPosts_ForBlogger2.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 == "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)
Related Posts: Add related posts below every post
Post a Comment