Add Simple Related Posts Widget In Blogger ~ The Next Generation Blog

Home » blogger_tricks » Add Simple Related Posts Widget In Blogger

Add Simple Related Posts Widget In Blogger

You might have seen the related posts thumbnails widget in my blog. That is simply made via LinkWithin Site, but you can create a simple related posts widget also, which is better because it doesn't decrease the load speed of your blog. In this way, you can recommend your other blog posts to the visitors without any loss in the blog load speed. So, let me start the tutorial:
> Login to your blogger account.
> Now, go to Template > Edit HTML > Proceed > Expand Widget Templates.
> Now, find </head> tag in the code and just above </head>, paste this code:

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
background: #F8F8F4;border-radius:5px;
border:#BBBBBB solid 1px;
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
background: #F8F8F4;
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
background: #F8F8F4;
font-size: 1.6em;
font-weight: bold;
color: #666666;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#383838;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
background: #F8F8F4;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:#F8F8F4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2FyENQ9QC1iT31W58gJgVTZDETOI5ikhXmlEQjmXBogN42bA2wdLa9Vms2qnOnGjVJANfAudvzPmktLtIEbBRtmxfqXG2Z1bxnCdcQcfGTT2M9cfWA-5WqZitZOza2zOj-93OQzpUySA/s1600/bullet.gif) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 3px;
padding-left: 30px;
padding-top:0px;}
</style>
<script type='text/javascript'>
var relatedpoststitle="Related Posts:";
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related_posts.js' type='text/javascript'/>
</b:if>

> Now, search for the code : <div class='post-footer'> in your template.
> Now just below <div class='post-footer'>, paste the following code:

<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=5; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script> </div> </b:if> <br/>

> Save the template and you are done.
Keep visiting for more tips and tricks. Subscribe to my blog updates via email using the subscription form below.