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
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 == "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/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-->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.
Hi, I'm sakib hasan sumon.I have requested you for this & You are a awsome friendly man. Thanks a lot for helping me.
ReplyDeleteAnytime sakib,Happy blogging..
DeleteA 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.
ReplyDeleteIf any suggestion for me
http://www.amarvoice.net
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.
ReplyDeletethis post is very beautiful but i want to related post with thumbnail.then i add try this and successfully add this thanks you .
ReplyDeleteThanks for comments :)
ReplyDeleteIt's not working on my blog
ReplyDelete