How to Add Related Posts Below Blogger Post ?

Dear CracksTrick readers today I am going to tell you how to add related posts below your post as shown in your the image given below. This is a good way to increase your daily page viewers for your site. If there is related post below your post the visitors those visit a may have a chance to visit other post which automatically increase your page viewers daily. This is a simple way to add a related post in your post so that it won't affect page load time.

Follow the following steps to add to add related post in your post

Step 1. Go To Blogger Dashboard >> Template >>Edit HTML;

Step 2. Check the "Expand widgets template" box;

Step 3. Search (CTRL + F) for this piece of code:

      </head>

Step 4. Copy and paste the below code just before/above </head>

<!--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: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgogBdpzETuo7jEpvW3M7IgGE4N64OF6IgqwWUi5IF_m9-uFVh2JJW8eeTng8pz8Yamba11W6VpqDreJc6DiVaWU7FK21E78MsNW_xpEAm_5S7-GVZ6Ohk5UfWDWEwC-WwwFHIGb6pPGRQf/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Note:

- to change the default picture, replace the URL in blue with your own
- for displaying more than 5 posts, replace 5 value from "var maxresults=5;"
- remove the code in violet if you want the related posts to be displayed in homepage too

Step 5. Now find the following code:

<div class='post-footer'>

Step 6. And just above it, copy and paste the below code:

<!-- Related Posts with Thumbnails 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>
<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=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgrrCpsmQ1soveVuO_nllJpXfqigLcHhjfSGxHcBGTY1QCGt-YijI-UD_rLckXa8r9nO-nVw_BsuTV363DT6b1VSjrdODgtKr5MqRpkdu_q9vIkAiUKnwcA4epcX9B1THW-1itQGMdA4rM/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>

<!-- Related Posts with Thumbnails Code End--&gt

;

Note:

Change the 6 value from max-results=6 with the number of posts you want to be displayed.
If you want the related posts to be displayed on homepage too, remove the code in violet.

Step 7. Save the Template now you have Done!!!!