How to Add Related Posts Below Your Blog Posts

You’ve probably been to some blogs and noticed related posts shown beneath each posts. This is definitely one of the hacks you must do on your blog. Why? It’s one of the little ways to keep your visitors busy and longer on your blog.

You first need to download this file.

Related Posts JavaScript

You should upload it to a reliable file host like opendrive.com. The one I uploaded is ok and you can use it anyway but I only suggest you should have a backup somewhere and use your own url. Like I said earlier, it’s ok to use the deault javascript in the code.

1. Login to your blogger account

2. Go to design and click on “edit html”

3. Check “expand widget template”

4. Press CTRL + F and find

</head>

5. Now, in the line before this, copy and paste the following code:

<!--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(&quot;http://www.gigaimage.com/images/brrl1rtaziisu0yj6kj6.gif&quot;) 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://caprio.googlecode.com/files/related_posts_for_bloggers.js' type='text/javascript'/>

6. Now search for this code

<data:post.body/>

7. Just after this line, paste the code below

<!--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>

8. Now save your template.

You should now see related posts under your blog posts.

IF YOU ARE USING A MAGAZINE STYLE TEMPLATE OR YOU’VE DONE THE “READ MORE” HACK ON YOUR TEMPLATE, YOU MIGHT HAVE MORE THAN ONE “data:post.body” IN YOUR TEMPLATE. TRY THE FIRST OR SECOND, WHICHEVER WORKS FOR YOU.

If you’re still confused about the right <data:post.body/> to use, search for this code instead:

<div class='post-footer-line post-footer-line-2'/>

Paste the code right below this.

Please note that nothing will be shown if you do not add labels to your blog posts when publishing!