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.com 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. :)

Some of stylish navigation bars.
           How to add related post widget for blogger
           How to add related post with thumbnail to blogger
           Thumbnail Related Post With Comment Hover For Blogger

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
<!--Related Posts 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 .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, &#8220;Times New Roman&#8221;, 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/AVvXsEgvP0PKtt54b5usz7bnXAH2yE5o01HHox7XV9B1Hhjbge_PsRFKjkt3vz0Lv2oq9Px2DwOyIrS1P-nOTSKLeyqwmA-gocSlOHIvdeLtulLbOfuVGUIrVEo9oEhl6SY0w4nSbnHchWf9NJE/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/AVvXsEinYZnd89G6MSyqZOIvQCzRvbbkG9xLdhOZguPwh3xxDDLkJCno-ku19ubmyXBzkYY_GT7-zj6044G99wSqCKrLRLoicLzxJnpylUcQqIabxOsyYEFGewNniNWzgTgAn1W9nB2KboUmBfo/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

<!-- Bloggertrix Related Posts Code Start-->
<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>
<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=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var maxresults=10;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>
</b:if>
<!-- Related Posts Code End-->

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.

Author Bio: Sohan Jayasinghe is the owner and author of Bloggertrix.com .He has been blogging since 2009 and writing Blogger trix since 2010.If you want to contact him, Just leave a message via contact us page.

Share this post