Related Posts Widget for Blogger/Blogspot with Images

Related posts Widget will generate the list of related posts. this
Widget can be added either in homepage (under each posts) or inside the
post. By placing this related posts Widget, there is chance to spread
the other posts to visitors and they may have a tendency to take that
post from the list, it will reduce the bounce rate of your blog and will
keep your visitors from suddenly quit from your blog. Let's see how to
add related posts widget to your Blogger site.

How to add Related Posts Widget to Blogger

Step 1. Log in to your Blogger Dashboard, then go to Template and click Edit HTML.

Step 2. Find below text from search (Ctrl + F)

]]></b:skin>

Step 3. Copy and paste the given code above this line.

<!--BlogTipsUK Related Posts with thumbnails Start-->

<b:if cond='data:blog.pageType == &quot;item&quot;'> /* remove this */

<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj37nbOqpcj8w7XSbrb2qcly3O4Al2X3nIk3WGKRYiKnl04jfSi3x63-7eaee487wMJaHvKF1b1R_7gt5ve7yQxfToQLxKAMWfLsinS_dwR6z4py2ZXFta8TLtR_4IUP-4WGtAjHsaNwEk/s400/noimage.png";

var maxresults=5;

var splittercolor="#DDDDDD";

var relatedpoststitle="Related Posts";

</script><a href="http://www.blogtipsuk.com/" style="font-size:0pt">Blogger SEO Tips</a>

<script
src='http://netoopscodes.googlecode.com/svn/netoops-related-posts-with-thumbnails-blogger.js'
type='text/javascript'/>

</b:if> /* remove this */

<!--BlogTipsUK Related Posts with thumbnails End-->

Change the red value to show number of posts.

Change the green color to change color of splitter line between posts.

Change the blue color to change Name of title.



Also read: Social Media Widget in Blogger



Step 4. Find below text from search (Ctrl + F)

<div class='post-footer'>

Step 5.  Copy and paste the below code above this line.

<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'/>

</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>

<a
href='http://www.blogtipsuk.com/2014/03/related-posts-widget-images-for-blogger-blogspot.html' style="font-size:20%">Relaetd
Posts Widget</a></b:if></b:if>

Change red color to change number of posts displayed in widget.