How To Add A Related Posts List Under Your Blog Posts

In this post i will show you how to place a related posts widget under your blog posts.Displaying related posts under your blog posts is a great way to keep visitors to your blog - on your blog.The gadget works by displaying a list of posts that have the same label/labels as the post currently being viewed, so there is a good chance the visitors will also be interested in the related posts.To add the recent posts widget we must add two pieces of code to your blog.

Adding Related Posts To Your Blog

Step 1. Click 'Layout'-->'Edit html' for your blog (Tick the expand widget templates box)

Step 2. Find the following piece of code in your blogs hmkl:

</head>

Step 3. Copy and paste the code below Directly Before </head>

<!--Related Posts Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related-posts {
float:left;
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.3em;
font-weight: italic;
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:red;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:10px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(http://i941.photobucket.com/albums/ad259/spiceupyourblog/rss-1.jpg) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Hey ! Here's Some Related Posts You May Like&quot;;
</script>
<script src='http://blogergadgets.googlecode.com/files/related.js' type='text/javascript'/>
</b:if>
<!--Related Posts Scripts and Styles End-->

Note: The heading is currently - 'Hey ! Here's Some Related Posts You May Like' - this can be changed as to anything you like.

Optional : Change Icon 

This is the small icon that is displayed beside every title :



This is the URL of that image :

http://i941.photobucket.com/albums/ad259/spiceupyourblog/rss-1.jpg

Simply find that URL in the code and replace it with the URL of the image you want to use.Make sure to use a small image around 16x16 to 25x25.

Step 4. Now find this piece of code in your blogs html :

<data:post.body/>

Step 5. Copy and paste the following code Directly Below <data:post.body/>

<!-- Related Posts Code Start-->
<a href='http://www.createtheblogger.blogspot.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAH6CBD-AUjFNI-vLZwNgx-R5oKymOEbxMpRKUDY_tGPIrjCQB_Y-NuBAIq44oWLLOhs0GqbQlrMI1QBj64vvS8fxl5Uj85_hYSYszmiDx3fKku6yvgZNrOTluqeT5VAq6YH7BjhwbZ6sV/s1600/best+blogger+tips.png'/></a><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.createtheblogger.blogspot.com' style='display:none'>Related Posts Widget</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
<!-- Related Posts Code End For Info: www.createtheblogger.blogspot.com-->

Note: You can change the maximum amount of related posts listed its currently 6
Simply change this section above : max-results=6

Once you click save the related posts list has been added.