Add Related Posts Widget after Each Blogger Post

Hey Guys, from now onwards I’m going to help you guys out in developing your blog and in using HTML.I will certainly teach more of these hacks !So in this post i will teach a very simple blogger hack ie.How to add Related Posts add the end of each blogger post.Just follow the given steps and your done !

increase blog traffic 56 Add Related Posts Widget after Each Blogger Post
First of all Download:RelatedPosts.js and upload it to some free host like HotLinkFiles.com or SigMirror.com

Just use this link which has been uploaded by me and copy the link from here in the following step !

http://www.hotlinkfiles.com/files/2601917_vpavy/RelatedPosts.js

1.Then go to Blogger.com and Log into you account
2.Then go to Layout > Edit HTML.
3.Download the full template ,just in case you do something wrong !
4.Then click on “Expand Widget Templates”.
5.Then find this

</head>

Just before that code paste this entire script

<!–RelatedPostsStarts(By Hack-Genius.blogspot.com)–>
<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.js‘ type=’text/javascript’/>
<!–RelatedPostsStops(By Hack-Genius.blogspot.com)–>

Replace the “http://sigmirror.com/……” with your Direct URL Which you got.

Now find this in your template(Use CTRL+F to use “Find”)

<data:post.body/>

Immediately after that paste the following code:

<!–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 != amp;quot;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 posts change this :

max-results=5

into any number of posts you want !
That’s it your done ,if you want to change the image that appears next to the post just do this (Just look at mine and you will understand,i have got a blue point )

Find :