Easy to Install Related Posts Widget for Blogger

Well I had earlier posted about 8 ways to install related posts in blogger. Nothing wrong in those methods and nothing much great in this one. The only difference is that I’ll post a step by step solution along with a video tutorial. Hope you enjoy it.

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!