Add "Related Posts" link at the bottom of a post

I would like to begin this post by acknowledging the efforts of whoever came up with this code.

 

At the bottom of each post, I wanted to create a list of related posts, but my template did not have this tool implemented. As they say Google knows everything and here is what I came after some Google search.

This code finds the related posts based on the label you have assigned to the posts.

 

1. Login to your blogger and select Template from the dropdown on the right side.

2. Back up your template so that if anything goes wrong, you can revert the changes. There is Backup/Restore button at the top right corner.

3. Click on Edit HTML button right under your blogger template. This will open your code window.

 

4. Toggle on option to Expand Widget Templates

 

5.  Search for the following code (Hit Ctrl + F on your keyboard)

</head>

6. Now copy and paste the following code right above this line. The following code will define how the links will appear (eg, font, color, mouse hover action, before and after margins etc)

<!--Related Posts Scripts and Styles Start-->
<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;
margin-top: 20px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
<!-- Formating "Related Posts" title -->
#related-posts .widget h2, #related-posts h2{
font-size: 17px;
font-weight: normal;
color: black;
font-family: Arial Narrow;
margin-bottom: 0.75em;
padding-top: 0.25em;
}
#related-posts a{
font-size:16px;
color: #555555;
font-variant:small-caps;
}
<!-- Defining Mouse Hover Options -->
#related-posts a:hover{
text-decoration: none;
color: #ffffff;
font-weight: bold;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
margin-bottom: 80px;
padding:0px;
text-decoration:none;
text-color:#000000
}
#related-posts ul li{
list-style-type: none;
border-left: 2px solid #1399CF;
border-bottom: 1px dotted #1399CF;
margin-bottom: 3px;
padding-left: 30px;
padding-top:08px;
}
#related-posts ul li:hover{
background-color: #1399CF;
border-left: 2px solid #B3CA3D;
border-bottom: 1px dotted #B3CA3D;
}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related_posts.js' type='text/javascript'/>

7. Now you will need to define the location where you want this list to appear. We will insert the list in the footer section of each blog post. This is generally right above your comments section. To define this location fidn the following code:

<div class='post-footer'>

  8. Copy and paste the following code right above this line. (If you cannot find the code in your template then look for <div class='post-footer'> and paste the following code:

<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>
<script type='text/javascript'> var maxresults=5; 
removeRelatedDuplicates(); 
printRelatedLabels(&quot;<data:post.url/>&quot;); 
</script> 
</div> 
</b:if>

9. Save your Template.

Customization

To change the font size, color, bold etc of "Related Posts" title then, under the section "Formating Related Posts title" section in the code, change 17px or black to your desired value.

To change the font size and color of the linked list change 16px or #555555 to your desired value.

To change background color on mouse over action, change #1399CF to your desired value

To adjust space above and below the Related Posts block change the numbers 0.25em and 80px to your desired value

To adjust spacing between lines in the list, change 08px to your desired value

To adjust the border thickness and color in the list change 2px solid #1399CF and and 1px dotted #1399CF to your desired values.

This Page has a list of different color codes that you can use in replacing the colors

After these changes Save your Template!

Cheers!!