Related Post With Image Thumbnail For Blogger

Related Post are very important for every blog or website because it helps to increase your Page views. Using related post widget is a attractive way because its helps to attract our users towards other articles also and lets them to stay in touch with your blog. Related post widget is very important and benefit for every blog. I always suggest everyone to use it in blog.

Today i am going to introduce this amazing related post widget with image thumbnail. Which make it more stylish and attractive. This widget will display at the end of every post at the footer place. I hope you like this widget and find it beneficial for your blog.

Steps To Add Related Post In Blogger

Before Starting Backup you template from Backup/Restore button in Template Section. After backup follow below steps carefully

• Go To Blogger Dashboard >> Then Template 

• Now click on Edit HTML

• Then do Ctrl+F and Search for </head>

• After Searching  </head>  Paste the below just above the </head> Section.

<!--Safe Tricks - Related Posts 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 h6{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, 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 {
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwwgpRN2VC0GYFDP1HWSCAsmGIQ2MMn8o4nPLvL2jdMYLRqkiZkDTAGen8rRjN1_ka-Bqx2z2qugs9vPgHlC7uQHv-CNZNN68nnyHVENXojpqMNLqLZoy89SzXDcgftLa42tVxpy7g8Fk/s72/noimage.png&quot;;
var maxresults=5;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='https://googledrive.com/host/0B_1mqJd2tC8qcHBrOFRaQ05mcDA/' type='text/javascript'/>
<!-- remove --></b:if>
<!-- Safe Tricks - Related Posts Ends-->

• After Pasting Above code now Search for code which looks like below code

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

•  This code may comes 2 times always choose code which comes at second place.

• After finding above code, Then paste the below code just below/After the code we search.

<!-- 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'>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End--> 

• After pasting both code click on Save Template And You have done it.

I hope you like related post widget under blogger post. If you face any kind of problem while using these code must ask me comments.