31 August 2016

How to Add Related Posts Widget With Thumbnails in Blogger

Recently, I share a post of how to add popular post widget to blogger blogs. So my readers request me to share the tutorial of how to add related posts widget with thumbnails to your blogger blogs.

image : How to Add Related Posts Widget With Thumbnails in Blogger
How to add "Related Posts" widget with thumbnails in blogger blog

I'll always recommended you to use related posts widget on your blog. When users visit any web page or single article page to your blog, they will also see the most relevant articles which is appears at the below of every posts.

This widget helps users to find most relevant information and that can improve your bounce rate and you'll also increase your website traffic easily.

People are always want to show something different things on their blogs. Basically there are different blogger widgets are available that are used for improving blog visibility and appearance.

"Related Posts" widget is also one of them. There are many ways to display this widget to your blog, but many of them shows irrelevant results which are not related to that particular article that we reading that time.

So this kind of widgets not attracts users, and they also provide the bad impressions to your readers. So today in this articles, I'll share a awesome and beautiful related posts widget that helps you to use according to your taste and interest.

Why We Add Related Posts Widget Below Posts in Blogger?

Before going further more, first question which is arise many of your minds, of why we use / add this related posts widget below every posts in blogger blogs? The answer is very simple.

Many times you may want to give some many other related links to your readers that helps them to read more stuffs on your site and remain active more time.

This will also helps for engaging more and more readers for a longer period of time that is useful for your blog growth but also increase your blog revenues. Because as much your visitors active and engaged with your contents as much you earn money online. 

When more people engaged with your contents on your blog, it means your bounce rate would be go down that is extremely useful. 

No doubt there are thousands of articles, tutorials are available on the internet that helps you add related articles below your posts in blogger blogs, but I hope that this tutorial will helps you more and you can easily adding this to your blog without any problem.

Adding Related Posts Widget Below Posts in Blogger Blogs

Step 1 - First of all go to blogger.com site.

Image : go to www.blogger.com official site

Step 2 - Now sign in to your blogger dashboard and select your blog.

NOTE : Before edit your HTML template, first of all make a backup of your template. 

Step 3 - Here your blog left sidebar options go to "Template" and click on "Edit HTML" button.

image : How to Add Related Posts Widget With Thumbnails in Blogger

Step 4 - Click anywhere inside code and press CTRL + F for finding some HTML tags.

image : How to Add Related Posts Widget With Thumbnails in Blogger

Step 5 - Now first of all find this tag.
Step 6 - Just before / above this tag, paste the below code.

<!-- Related Posts with thumbnails Starts-->
#related-posts {
float: left;
width: 650px;
border-bottom: 1px solid #ddd;
height: 290px;
#related-posts h2 {
margin-top: 50px;
border-bottom: 0px;
border-top: 1px solid #ddd;
padding-top: 20px;
margin-bottom: 10px;
margin-left: 3px;
color: #666;
font-size: 16px;
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var defaultnoimage=&quot;https://lh6.googleusercontent.com/-uckOXB3-t6A/V8cTI0h8cLI/AAAAAAAAH2E/Sn9l_YsqW8UEJMPcRW0AN
var maxresults=4;
var splittercolor=&quot;#fff&quot;;
var relatedpoststitle=&quot;Related Articles:&quot;;
<script type='text/javascript'>
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
catch (error){
{thumburl[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="https://lh6.googleusercontent.com
if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i]))
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];}}
relatedTitles = tmp2;
relatedUrls = tmp;
function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;}
function printRelatedLabels_thumbs(current) {
var splitbarcolor;
if(typeof(splittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#DDDDDD";
for(var i = 0; i < relatedUrls.length; i++)
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0.5px '+splitbarcolor+';"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:200px;height:120px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="padding-left:3px;height:65px;border: 0pt none ;
margin: 3px 0pt 0pt; padding: 0pt; font-style: normal;
font-variant: normal; font-weight: normal; font-size: 12px;
line-height: normal; font-size-adjust: none; font-stretch: normal;">
if (r < relatedTitles.length - 1) {
} else {
r = 0;}}
</b:if><!-- Related Posts with thumbnails End-->

Step 7 - Now again press CTRL + F and finding the below tag.


If this tag appear more than one time, then simply paste below code one by one of each of the following tag below. Where it working well paste there.

Step 8 - Copy below piece of code and paste just below above tag where it working.

<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;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?
=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>

Step 9 - If this code not working or you cannot find the above tag, then simply press CTRL+F and find the below tag and paste this code just below it.

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

Step 10 - Now save your template and check your blog.

I hope it will working on your blog, but if this widget not working, then don't worry, feel free to comment below this article. 

I hope this article helped you in adding related posts below every posts in blogger blogs. Related articles widget helps a lot in reducing your bounce rate and gives a lot of traffic and increase your leads, sales and commissions. If you have any questions in your mind, share in comment section.

Previous Post
Next Post

I'm Aamir Saleem, a professional blogger and SEO Consultant. I loves to write on blogging, SEO, Internet Marketing, Business, Social Media and Make Money Online. Connect Me Via !!!