Adding Related Posts Below Blog Posts In Blogger

How about adding Related Posts below your blog posts? Advantage of adding Related Posts below yourblog post is that your readers may find some of your Related Posts interesting and click on the link to read the post, thus your readers stay time on your blog increases and thereby increases your pageviews. So this tutorial will help you to add Related Posts below your blog posts.

Steps Of  Adding Related Posts Below Blog Posts In Blogger:--

1--> Login to your Blogger Account.

2--> Go to Blogger Admin Page > Template > Click on Edit HTML.


3--> Check Expand Template.

4--> Ctrl + F and find </head>

5--> Above </head> , Copy and Paste the codes given below:

<!--Related Posts with thumbnails 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 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:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Bj9J5DQiB9OcyYN_wVXM03ODzmiD-r3SOBdqh3jxZPyQP1tb150it5xT283bo5vxw9phyphenhyphenAtQ9jhi59WK-DN5B6XZYY1ANTjULfY4w9FjrQaXfN9IB21KAFJFqmVEXYTgxHuDYGnxBg/s400/noimage.png&quot;;
var maxresults=5;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js'
type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

6--> Now press again Ctrl + F and Find <div class='post-footer-line post-footer-line-1'>

7--> Above  <div class='post-footer-line post-footer-line-1'> , Copy and Paste the codes given below:

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
     <!-- Related Posts with Thumbnails Code Start--> 
     <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_thumbs&amp;max-results=10&quot;' type='text/javascript'/></b:if></b:loop> 
     <script type='text/javascript'> 
     var currentposturl=&quot;<data:post.url/>&quot;; 
     var maxresults=8; 
     var relatedpoststitle=&quot;<b>Related Posts :</b>&quot;; 
     removeRelatedDuplicates_thumbs(); 
     printRelatedLabels_thumbs(); 
     </script> 
     </div><div style='clear:both'/> 
     </b:if> 
     <!-- Related Posts with Thumbnails Code End-->

8--> Save your Template and Done.