How to Display Related Articles Every Below Posts in Blogger

Sometimes you may want to give some extra stuff to your visitors so that they can engage and spend more time on your website. Engaging readers for a longer period of time is something that is extremely useful for not only growth but increase in the revenue of a website. The more time people spend on your site, the more chance of getting good sales through affiliates, Adsense or etc anyway follow the below instruction how to insert related post inside every blogger post ?

Steps adding the Related Posts Widget to Blogger/Blogspot
1. Go To Blogger Dashboard >> Template >>Edit HTML
2. Click anywhere inside the template's code and press the CTRL + F keys or F3 key
3. Now Search for this piece of code by typing it inside the search box:

                               ]]></b:skin

4 Copy and paste below code just above the ]]></b:skin> tag.

#related-posts {

float:center;

text-transform:none;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:0px;

}

#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{
background:#21adb4;

border-right: 5px dotted #DDDDDD;

color:#ffffff;

}

#related-posts a:hover{

color:black;

background-color:#ffffff;
border: 5px dotted #21adb4;
color:#000000;

}

5. Now copy and paste below code just above the </head> tag.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script type='text/javascript'>

var defaultnoimage=&quot; https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYA8xx3SYxJkzgqIyWzC2Q83DrHBByDjpcxOrLzUwqwe3_CD5m-vS5f-yksyZRVgQdXwz9ZJmF-MOxc4wpnwty1OypQcbv0LLw4Umgu_C2lATBFqevsq3xBeLWrn7zXaHhEmwGTRmdeco/s128-no/&quot;;

var maxresults=5;

var splittercolor=&quot;#DDDDDD&quot;;

var relatedpoststitle=&quot;Related Posts&quot;;

</script>

<script src=' https://kedar-adhikari.googlecode.com/svn/aajakopatrika.com.js' type='text/javascript'/>

</b:if>

Please remember: - to change the ammount of related post var maxresults=5;,
6. Now find the following code (you might find it twice, stop at the second one):

<div class='post-footer'>

7. Now finaly copy and paste the below code just above the  <div class='post-footer'> tag.

<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>

9. Now last step save the templates the related post is successfully has been done!