How to Add Blogger Related Links to Below Blog Posts

In this tutorial im gonna explain, how to add blogger related link list below posts.So, this is the exact one of bloggertrix related post. By using this trick,It helps to keep your readers in your website too long.It more important for increase pageviews and SEO as well.Few months ago i posted about Thumbnail View With Related Post For blogger. So, those who are not interested in links style, you can go for thumbnail effect.

Every steps are explained well.If you have a problem, just comment below.And im not gonna make new demo for this tutorial like i do.You can get a demo, end of this article.happy blogging. :)

How to Add Blogger Related Links to Below Blog Posts

1. Go to Blogger Dashboard > Template
2. Backup your template
3. Click on Edit HTML
4. Find ]]></b:skin> and add below code just below it

/* The CSS Code for the menu starts here bloggertrix.com

<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:#0c0080;}
#related-posts a:hover{color:#0ab0fd;}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:12px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUitXPfhLdlWo8L3XHHcy0GVHnuXHw_hQ7XaMrpiNlR5az5ohL0LLnEd0sYGX-BpR8pihpHwnbBeTcZA4U7hXPpGae6Xk8mg0gXZinV0HT-wkJpO0ciJGPseoDhvhY5e8tM1voIezdO1w/s1600/btrix_arrow-icon.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;
height: 20px;
margin-top: -5px;}

#related-posts ul li:hover{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha3RNjLwUyHULkEoLPuRa6wAjPKOYGP-n4KY9oKAjPD6VfgrMkjpSTUNev7I8pfLBHxSZX-HtjvNTr7b4CLqdvW3UojB7j7GxAz2NoGl_4DaZgz7Q94O0c2uAfjR404do7mnU4xLNzb5M/s1600/btrix_arrow-icon2.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}</style>

5. Again Find <div class='post-footer-line post-footer-line-3'> and add below code just below it

<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>
<script type='text/javascript'>
var maxresults=10;
removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>");
</script>
</div>
</b:if>

You can change maxresult as your like ( how many related posts need to visible)

8. Now save your Template.

You are done. If you have any problem related to How to Add Blogger Related Links to Below Blog Posts. Just leave a comment.I will help to you.