How To Add/Enable Related Posts Widget To Blogger With Thumbnails:

How to enable related posts in blogger?This tutorial helps you on how to enable related posts widget for your blogger blog with thumbnails.The purpose of showing related posts widget in blogger blog is to make your readers know about the other posts related or similar to the the post they are accessing.With the help of this widget the readers will remain on your blog for longer period and also helps you in getting more page views.

1. Go To Blogger Dashboard >Template >Edit HTML.

2. Check the 'Expand widgets template' check box;

3. Now Search (CTRL + F) for this code: </head>

4.Paste the below code just above </head>


<!--Related Posts with thumbnails-->
<!-- 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: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzCzXmHnPru4Bmb2nOuFWnz8otuduYeEw__-2G9-rqYMDalC67p-rRBNyqj794je1FAYcqmHf1MyfBlKQytwPoYPKRaODS-DcecxBAdWKLBLbpc__g0Y3LFXEYjDmfdP4YR5v89FolwITo/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;You Might Also Like&quot;;
</script>
<script src='http://genuinecontent.googlecode.com/svn/trunk/genuinecontent-Related-posts-widget-with-thumbnails.js' type='text/javascript'/>
<!-- remove --></b:if>
<a href='http://genuinecontent.blogspot.com'></a>
<!--Related Posts with thumbnails End-->

5. Now Search the following code: <div class='post-footer'>

6. just above it, copy and paste the below code:


<!-- Related Posts with Thumbnails 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://genuinecontent.blogspot.com'><img alt='The-genuine-blogging' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHB3qfItlmu4ItCGqIfGpG6wSMB5QQ3tgjd8ziRsEUbLhWdTGklX7cGpmAnyejsAg0Lj2ZOy3hpcAyIRwuX1-nugkVeN0G0fftTeOOoZ_NiQkW9ScLFjfSGEEIxE5G8CSFTS90xZMfina6/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails End-->

7.Save the template.That's it:)