Related Posts Widget for Blogger/Blogspot with Images

How to add Related Posts Widget to Blogger

Related posts Widget will generate the list of linked or connected 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 similar 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-->
#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;
}

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

Step 4.  Copy and paste the below code where you want to show the related posts.

<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' >Related Posts</a></b:if></b:if>

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

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

</head>

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

<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimI2V376_pyeMfXA0X0ff94j1qoPpFNVUkc16rXib3esevhUnUJBgHJqRX8-tLo2hc6nt_Go98yxDf63mvt4RTH4Dtnqfx4iULJiUHwS_6YV6Keerkra63CNrmqDFoHw9EvQlvho0-8Rc/s400/noimage.png";
var maxresults=6;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Posts";
</script>
<script src='https://googledrive.com/host/0Bxhkdxy8J6szQ2tCNUJJdllKVVk/' type='text/javascript'></script>

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.

 I hope this article will help you.We have just ?added a Related Posts Widget to Blogger. If so please like and share our blog. You can check here more Exciting Blogger Widgets.