Now here is wonderful hack for displaying links to related posts beneath each of your blog posts. The related articles are chosen from other posts in that same category/label/tag. With this hack many of your readers will remain on your site for longer periods of time when they see related posts of interest.

Steps for Implementation:

1. Go to Layout >Edit HTML in your Blogger Dashboard.
   
2. Back up your existing Template before making any changes!


3. Make sure to check the "Expand Widget Templates" box.


4. Search for the tag.
   


5. Add the following code just before the tag.

<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://i299.photobucket.com/albums/mm297/zozuglogger/weed-bullet.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://torrentmoon.com/javascripts/Related_posts_hack.js' type='text/javascript'/>

Now search for <p><data:post.body/></p>

Add the following code just beneath
the code you just searched for.

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

Now Save your Template
and you're done!

Customization

• In order to change the number of maximum related posts being displayed,
  search for the code below (within the code given in step 7) and change the
  number "5" to
  any desired number.
  

  max-results=5

If
you have any questions on implementing this hack into your own blog,
shoot me a comment and I'll be glad to
help!

Make sure to check out our other great Blogger Hacks as well:

Special thanks to Real Trix!