Saturday, November 2, 2013

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

Blogger-Related-Links

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/AVvXsEjfUR-z-X-vFqcgQQmB9ZWiI-nNCsmhR7V_aTTWXKMmmgyZhFD2G1mGD3EmdLQy7Yir-YiCxSTgc2_vV9007ax37iKufMWlI315JLq0LIo8ISpYmNilFxexV6lfEeyU1i5gA_eop4T0ZYs/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/AVvXsEh7gxy_vYUB9V4K6qkQ0rQDOW95svQ8SNU3b0LGCs1fS7BZpHMuxQbqJY_QsWU9VLlttD847g77BoqSpsi5i-JoQ12_YwOqQZxonZYF4a-0NkVo2p4CCT1hC2Fzc7lCSs9wY188c6L8tIA/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.

7 comments:

  1. Hi, I'm sakib hasan sumon.I have requested you for this & You are a awsome friendly man. Thanks a lot for helping me.

    ReplyDelete
  2. A thoroughly grateful reading feel you are having reading this blog. Constantly on cue is what the author is. Writer offers excel recommendations to commenters and in short time. Awesome reads. Everyone who desires to know on this topic should subscribe to this blog. Pick thing is the archive feature serves as a fast recommendation to old and relevant things. Any last gossip is covered in this blog, says a lot about sources in high places. I enjoy the quick references helpful in the blog. The details in the visual air of this blog are to be appreciated. I cannot help but question why such reflections were not said previously. Excellent to spot that closely all posts are banded together with related photos. A plus for illustrations that can be seen with a basic click. It's excellent how the ads are associated and pleasing to the posts. There's a brief review for each article and visitors can choose to see whole of it, if interested. I like the background colors, everyone can read everything clearly. I enjoy the speed at which the site is updated. I like the manner in which the author explains the most complex of concepts with ease. It's nice to find a blog where I can go ever both old and new articles. It's lighting fast how speedily the site loads, it's almost instantly. The articles are aesthetically put. The articles maintains you hooked to the finish. The colors of the blog do not stress the eyes thanks for suchlike restful colors. There's a specific feel about the blog that i love largely. This blog is great every time providing unbiased studies and infos.
    If any suggestion for me
    http://www.amarvoice.net

    ReplyDelete
  3. I think this is much important part of any blog because once you divert the mind of reader towards its interest then he also looking more content which is related to same category. So he is always looking for related links which is also helpful to increase traffic on blog. Thanks for sharing this coding for adding related post links below blog posts.

    ReplyDelete
  4. this post is very beautiful but i want to related post with thumbnail.then i add try this and successfully add this thanks you .

    ReplyDelete