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
<!--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:#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
<!-- Bloggertrix Related Posts Code Start-->You can change maxresult as your like ( how many related posts need to visible)
<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>
<!-- Related Posts Code End-->
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.
While saving the template I got the following error:
ReplyDeleteError parsing XML, line 700, column 5: The element type "b:if" must be terminated by the matching end-tag "".