How to Add Related Posts Below Every Post on Blogger

The related post help in the increase of blog visitors and make sure your visitors are satisfy with the content related to any post that is being published on your blogger blog.
This wonderful related post is very easy for viewers to click see and also it cn be displayed on any device and it doesn't reduce your blog speed.

Step 1
First you need to visit your blogger dashboard and then select your preferred blog which you will like to work on.




Step 2
After clicking on the blog then move your mouse down to the "Template " tab and click on it >>>> "Edit HTML".




Step 3
Click on any part of the HTML and then press CTRL+F on your keyboard and the search for the below code


<head/>




Step 4
Now your will have to paste this code after the <head/> tag

<!--zealmatblog-Related-Posts-Starts-->
<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirRBJ4NssTYHdC8veyhWykDCDYomv7Bbl3HIlhQn1tL-Tiw9IDKhyphenhyphenQR9C5YaB_tw7J-tg__7yvq6phEjy1xeUeUBOiId6FY66Qu6fJrAOOx0YwUKo1p2D_-TI3cCfF6YVX86TBX5BcCTo/s200/greentickbullet.png&quot;) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
 </style>
<script src='http://zealmatblog-css-js.googlecode.com/svn/related-post.js' type='text/javascript'/><!--zealmatblog-Related-Posts-Stops-->

Step 5
Now press CTRL+F on your keyboard and the search for the below code again

<data:post.body/>

Step 6
After the above line paste this code

<!--ZEALMATBLOG-RELATED-POSTS-STARTS--><b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <font face='Arial' size='3'><b>Related Posts: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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=5&quot;' type='text/javascript'/></b:if></b:loop> </font> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script></div></b:if><!--ZEALMATBLOG--RELATED-POSTS-STOPS--> 

Note
=>>If you have implemented the automatic read more to your template then search for it if the below code

<p class='post-footer-line post-footer-line-1'>

or

<div class='post-footer-line post-footer-line-1'>

or

<div class='footer'>  

Changes
You can increase the number of related post below by changing this figure below


max-results=5




Step 7
Finally save your template an click on the preview button above.


Lastly always remember to include post lebel on every post before publishing because with this lebel your related topics won't display.