You can view the video tutorial here. For an image only tutorial follow on below. You can get the code’s shown in the video from below:

OK. So the installation goes as this:

• First login to your blogger account and under the blog in which you want to implement the related posts, click onLayout. Next click on Edit HTML.
• Now check the Expand Widget Templates check-box (as shown below). This check-box is found on the top-right of the box containing your template’s code. 
• Now press Ctrl+F to bring about your ‘Find Box’ in your browser, and search for the following code.

  </head>

  Now replace it with the following code (Code Listing 1.1):

  <!--Related Posts Scripts and Styles Start-->
   <!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>
  <style type="text/css">
  #related-posts {
  float:center;
  text-transform:none;
  height:100%;
  min-height:100%;
  padding-top:5px;
  padding-left:5px;
  }
  #related-posts .widget{
  padding-left:6px;
  margin-bottom:10px;
  
  }
  #related-posts .widget h2, #related-posts h2{
  font-size: 1.6em;
  font-weight: bold;
  color: black;
  font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
  margin-bottom: 0.75em;
  margin-top: 0em;
  padding-top: 0em;
  }
  #related-posts a{
  color:blue;
  }
  #related-posts a:hover{
  color:blue;
  }
  #related-posts ul{
  list-style-type:none;
  margin:0 0 0px 0;
  padding:0px;
  text-decoration:bold;
  font-size:15px;
  text-color:#000000
  }
  #related-posts ul li{
  background:transparent url(http://2.bp.blogspot.com/_u4gySN2ZgqE/SnZhv_C6bTI/AAAAAAAAAl4/Rozt7UhvgOo/s200/greentickbullet.png) no-repeat ;
  display:block;
  list-style-type:none;
  margin-bottom: 13px;
  padding-left: 30px;
  padding-top:0px;}
  </style>
  
  <script type='text/javascript'>
  var relatedpoststitle="Related Posts";
  </script>
  <script src='http://blogergadgets.googlecode.com/files/related-posts-for-blogger.js' type='text/javascript'/>
  
  <!--Remove--></b:if>
  <!--Related Posts Scripts and Styles End-->
  </head>

  To change how title of the related posts widget appears, edit the text in green. To change the green tick-mark appearing beside your related posts edit the url marked in blue.

• Now search for

  <div class='post-footer-line post-footer-line-1'>

  or

  <p class='post-footer-line post-footer-line-1'>

  and immediately after any of these lines(whichever you could find) place the code below (Code Listing 1.2):

  <!-- Related Posts Code Start-->
  
  <!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id='related-posts'>
  <b:loop values='data:post.labels' var='label'>
  
  <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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-for-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget for Blogger" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
  
  <script type='text/javascript'>
  var maxresults=5;
  removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
  </script>
  </div>
  
  <!--Remove--></b:if>
  <!-- Related Posts Code End-->

  You can change the number of related posts to be displayed by editing the number in pink.

• To show related posts on all pages, just delete the text in red from both of the code listings.

Thats it, your done! Have any troubles? Comment, I’m right here to help!

The methods found here have been tested by me and are working. Note that I recommend the 6th, 7th and the 8th method, simply because they are so easy and yet so brilliant!

• Related Posts for BlogSpot Bloggers Using jQuery

  Swashata, from intechgrity.com, has posted a well-written and detailed tutorial of implementing the related posts system in a blogspot blog using jQuery.

  You can read and refer to the tutorial at devilsworkshop, from here.

• 3 Ways to implement related Posts from Mohamed Rias

  Okay, I’m cheating over here. Althought the post screams ’8 Ways to implement…’, I’ve combined three methods into a single point. That’s because the original article is also a single post.

  Mohamed Rias, in his blog techieblogger, has shown three methods to implement his version of the related posts. Although the framework and logic behind the related posts of this type is the same, the ways of implementation differ. It has been separated by being specified by method one, two and three.

  Personally speaking, this was one of the best related posts solution that was available out there for quite some time. I myself used the third method for more than one year. You can refer to the guide from here.

• Google Related Links

  This is a relatively new entrant into the field of related posts for blogger. Many even don’t know of its existence, mostly because it is only invite-based for the moment.

  As stated earlier, currently, only invited users can use Related Links. To apply for an invitation, please send an email to relatedlinks@google.com stating your Gmail address, website domains and approximate pageviews per day.

  In the mean time you could try it out by filling out this form

• Blogger Related Posts Service

  This is what I’m talking about. The easiest and most convenient method of implementing related posts in blogger. Its so simple, just follow the steps below:

  Step 1: Go to Layout => Edit HTML => Edit Template
  Step 2: BACKUP your template! Do not skip this!
  Step 3: Check Expand Widget Templates, then find for a block like:
  
<div class="post-footer-line post-footer-line-3">...</div>

  At the end of the </div>, add the following line:
  
<div id="related_posts">

  so that the final product will look something like this:
  
<div class="post-footer-line post-footer-line-3">
/*some code*/
</div>
<div id="related_posts">

  Step 5: Go to the end and search for </body> and replace it with the following code:
  
<script src='http://www.google.com/jsapi'/><script src='http://brps.appspot.com/brps.js' type='text/javascript'/></body>


  Alternatively you can just click on the button below:

  <script src=”http://www.google.com/jsapi”></script> <script src=”http://brps.appspot.com/brps.js” type=”text/javascript”></script> <div id=”related_posts”></div>

  You can read more about it from here.

• Related posts using jQuery + GData API

  Another great method that i found out was the one posted at moretechtips.net . It’s simply a super and easy method to implement this widget. Just refer to this tutorial.

• Related Posts using LinkWithin

  This one is slightly different from the one’s posted above. All the above related posts show text links as related posts. However the LinkWithin widget shows an image from the related post as the link, as shown in the picture below (click on the image to view a larger version):

  

  You can register at their site, and get the appropriate installation method. Go to LinkWithin.

Hope you liked the post. If you’ve got any doubts, don’t hesitate to comment.