Related post widget is a very important tool for a blog that allow your visitors to navigate through similar posts from your blog. This will help you to reduce the bounce rate of your blog.
To add the related posts widget in your blogger blog you will have to follow the following two simple replacement steps.
1. Firstly LogIn to your blogger account
2. From the Dashboard of your account go Design > Edit HTML and click on "Expand Widget Templates"
3. Now by pressing F3, search
To add the related posts widget in your blogger blog you will have to follow the following two simple replacement steps.
1. Firstly LogIn to your blogger account
2. From the Dashboard of your account go Design > Edit HTML and click on "Expand Widget Templates"
3. Now by pressing F3, search
</head>
4. Just before paste the following codes<!--Related Posts Scripts and Styles Start-->
<!--Remove--><b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:blue;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAywuDCEI_MkyUyi5Msez_LmVBRQ9hllikvfdq19BEi6Nb-APWbH4ntUkdjYOvfvUYEBjTkTJwevQ0ZiSHxZ9I5r-FDlnagkfpoiks-yAH4x_aIKzfudhHGavgrZC56MpjzhFmWmu2REQ/s200/greentickbullet.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style>
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-for-blogger.js' type='text/javascript'/>
<!--Remove--></b:if>
<!--Related Posts Scripts and Styles End-->
5. Now search the following line<div class='post-footer-line post-footer-line-1'/>
6. After the above line paste the following codes<!-- Related Posts Code Start-->
<!--Remove--><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-for-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget for Blogger" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>");
</script>
</div>
<!--Remove--></b:if>
<!-- Related Posts Code End-->
7. Now, save your changes.