I've been already talking about the Related Posts widget for your blogger or WordPress blogs that shows related posts along with thumbnails just at the bottom of your blog posts. But many bloggers want to use simpler and cleaner way to show related posts without any thumbnail. Today, I'm going to share simple related posts widget for your blog that will show a fresh related posts section below your articles. Add this widget with two simple steps. Let's start the tutorial:
Add Simple Related Posts Widget to Blogger Blog
- Go to Blogger Dashboard » Your Site » Template
- Click On Edit HTML » Find </head> Tag
- Paste The Given Below Code Just Above The <head>
<!--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:blue;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKdg0P1tohGs05wprQKaBww8DBE_KHEoi3M506NGK-cTPvixG2TOfaVeKk5G3QndaMvsEl25BCRyN_2NmMurrFDvkhyphenhyphentbUa34iVFl7KVY5JMMVU4iE-IrGXdTXxhAc7EKBFYTF2ThMHPtO/s1600/staricon.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style>
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='https://googledrive.com/host/0B66hLK2d2x4VZFJWNTExM1Q3S28' type='text/javascript'/>
<!--Remove--></b:if>
<!--Related Posts Scripts and Styles End-->
</head>
- Now, Press (CTRL + F) and Find The Below Line.
<data:post.body/>
- Just Below it, Paste the Code Below:
<!-- Related Posts Code Start-->
<!--Remove--><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/summary/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://www.blogsdaddy.com/2013/07/simple-related-posts-widget-blogger.html' rel='nofollow' target='_blank'><img style="border: 0" alt="Related Posts Widget for Blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_HnfNcd-TDNPUZDNPhSQg_l4K3VrDm4rpRCG7X8qNyAAZSvS00ENGsMafG9rp2RJF1cLsvFEDRmOXGpCdUQmU1T2WWna5N-Q_ZGGHBBIh1G5INs6W20IugioTETfDAIH7pTJ97-ocmegb/s1600/blogger_logo.png" /></a>
<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>");
</script>
</div>
<!--Remove--></b:if>
Customization
- If you want to change the title of your widget then replace it "Related Posts".
- Number Of Posts You Want To Display, Replace it var maxresults=5;
Now, save your blogger template and its all done. If you need our help then ask us via comments. Stay Blessed and Happy Blogging :)
Great post. Hope work for me. Thanks for sharing.
ReplyDeleteIt will definitely work for you Munish.
DeleteI'm totally agree with you.Thank you for sharing it.
ReplyDeleteVishwas brother thanks for your valuable comment. Stay tuned please
DeleteThanks for Sharing this info
ReplyDeleteRegards,
http://www.kbtricks.com/
Thanks Kulvir brother. :) I am daily visitor of your blog. Stay tuned with us.
Delete