How To Add Related Posts To Blogger

Google Blogger is the best blogging platform to start your blogging career with. It's free, fast, secure and reliable. But many of my friends complain that Blogger is not robust and can't be compared to Wordpress. Wordpress have plugins, good looking themes which are easy to install and use, whereas in blogger, you have to insert code snippets in templates which, sometimes is frustrating. But, Blogger blogs can also be made powerful and good looking. Here is a tutorial by me, where I tell you how to add a 'Related Posts' Widget just below blog posts. A Related Posts widgets helps a blogger in many ways. A related posts helps you get more traffic and unique visitors, more interlinking which leads to higher page ranks and more. If you have recently visited my blog, you might have noticed that i have added a related posts widget below all my posts which has really helped me get more traffic.

• Go to Blogger(sign in)>Design>Edit HTML.

• Now search(Ctrl+F) for </head> replace it with the code given below:

<!--Related Posts with thumbnails 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 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:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
 b ackground-color:#d4eaf2;
}
</style>
< script type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

Now, Find

<div class='post-footer-line post-footer-line-1'>

If you can’t find it, then try to find the one given below:

<p class='post-footer-line post-footer-line-1'>

Now, just after the line(whichever you have found), paste the code given below:

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style ='clear:both'/>
<!-- remove --></b:if> 
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Now click on Save Button and check whether you have properly installed the widget or not. And remember, Blogger is the best platform for an individual to learn about blogging.

Good Luck!