Add Related Posts Widget to Blogger/Blogspot

Related posts is one of the most important widget that is used for visitor retention. When a visitor finishes reading a content in your blog, then the best thing to do is to present those visitors with more things to read. Instead of just displaying random things to read, you can show them related posts. When you display such posts, it is highly likely that you visitor will click on them and stay a bit longer in your blog.

There are several places where you can display related posts. The best place is to display related posts, right after the article. This way, your visitors will directly view those related posts. Choosing which one to display in blogger is totally up to you. Blogger gadgets normally use labels of a post to determine the most related posts. So, make sure that you make good use of the labels feature and add the correct labels to your blog posts.

Here is how you add related posts right after an article in Blogger / Blogspot:

1. Log in to Blogger, click on your blog and go to “Template”, from the links on the left.
2. Click on “Edit HTML”. You will be able to edit your template’s HTML / Blogger XML code. Be very careful here.
3. Find the following code in your Blogger template code
   <b:includable id='post' var='post'>
4. For this tag, after a couple of lines below, there will be a closing. It might be really further down depending upon your template.
   </b:includable>
5. Right before </b:includable> add the following lines of code

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <br style='clear:both;'/>
   <!--Related Posts Start-->
   <style type='text/css'>
   #related-posts h4{margin:5px 0 0;font-weight:bold;line-height:1.2em;font-size:16px;}
   #related-posts ul,#related-posts li{overflow:hidden;padding:0;margin:0;list-style:none}
   #related-posts ul{margin-top:10px}
   #related-posts li{float:left;width:48%;padding:5px}
   #related-posts .relimg{float:left;margin:0 5px 5px 0;padding:3px;border:1px solid silver}
   #related-posts p{margin:5px 0 0}
   #relloading{width:100%;min-height:150px;background:transparent url(http://1.bp.blogspot.com/-VIzmxDnV8_Y/UqH6yMEeZDI/AAAAAAAABvU/c4NmWKUB_aw/s320/loading.gif) no-repeat center;display:block;text-indent:-9999px}
   </style>
    <script type='text/javascript' src='https://googledrive.com/host/0B9VnchIrte6hOUtZNXpXTm90TE0' ></script>
   <div id='related-posts'/> 
   <script type='text/javascript'>
   //<![CDATA[
   relatedposts({
   rel_title: "You May Like",
   rel_posts: 4,
   rel_thumb: 70
   });
   //]]>
   </script>
   <!--Related Posts End-->
   </b:if>

   Configurations:
   rel_title: Title of your “Related Posts” widget.
   rel_posts: Number of related posts to display at maximum.
   rel_thum: Thumbnail dimension in pixels.

6. Hit on the “Save Template” button and wait till the template is saved. You are done. View your labelled posts. Related posts will appear right below those posts and right above the comments field. You can move this code around if you know what you are doing. But, this code will not work in the sidebar or HTML/JavaScript widgets.

Here is a preview of this widget in action:

Notes:

1. You must have jquery in your template for this code to work.
2. You must also have published Blogger feeds (Blogger settings > Other > Site Feed > Allow Blog Feed).
3. Currently this plugin only displays four related posts.