How to Display Related Articles Below Posts in Blogger

People always wonder that how many blogs are able to display something like a list of “Related Articles” just beneath each and every post. It not only helps the user to find the next relevant topic but also engage them for a longer period. Recently, one of our users asked us that How to Display Related Articles Below posts in Blogger? Technically, there are a lot of ways of displaying related articles or posts but most of them are not highly targeted. Either they don’t attract people or they provide totally irrelevant results. Today in this article, we will show you How to Display Related Articles below posts in Blogger?

Why to Add Related Articles below posts in Blogger?

Sometimes you may want to give some extra stuff to your visitors so that they can engage and spend more time on your website. Engaging readers for a longer period of time is something that is extremely useful for not only growth but increase in the revenue of a website. The more time people spend on your site, the more chance of getting good sales through affiliates, Adsense or etc.

When people are engaged on your site, it means that your bounce rate would go down which is indeed a great sign for those site owners who always complain about high bounce rate. For those are not familiar with bounce rate check this article.

Yet, these are the few perks of displaying related articles below your posts because it really makes your site looks professional plus provide great engagement possibilities.

How to Add Related Articles Below posts in Blogger?

The First thing you need to do is to login into your Blogger account and go to >> Templates >> Edit HTML and search for the ending </head> tag and just above it paste the following code.

#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;;;
var maxresults=3;
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]="";}
if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
for (var k = 0; k <; k++) {
if ([k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] =[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;">'+relatedTitles[r]+'</div></a>');

if (r < relatedTitles.length - 1) {
} else {
r = 0;

In the template, search for the <data:post.body/> tag  and just below it paste the following HTML Coding. In case, you are unable to find <data:post.body/>,  then you can paste it just below <div class='post-footer-line post-footer-line-1'></div>.

<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; + + &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'>

Congratulations: You have successfully learned how to display related Articles below posts in blogger. Go and preview your posts to see everything is working in an order or not.

We hope this tutorial has helped you in displaying related Articles below posts in blogger. Related articles helps a lot in reducing your bounce rate and gives a lot of great sales. If you have any questions, then do not feel shy to ask. 

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
Choose Wisely!


September 9, 2013 at 5:56 PM

Is there any way to customize the related post thumbnails? because I use
.post-body img {
max-width: 635px!important;
height: auto!important;

September 9, 2013 at 8:11 PM

Hmm...didn't work for me:(

Editorial Team MOD
September 10, 2013 at 1:27 AM

What error you are facing?

September 10, 2013 at 5:00 AM

Thanks for sharing this splendid gadget with us...This will surely bring awesomeness in our blog designing.

Syed bro i have one off topic question..please reply me. i need your reply must...

I have been rejected by BSA....So what to do after how many days i can apply again for buysellads...they send me an email and said that you can again hit up after 6 months..So can i again apply for BSA after a month or 2...

September 12, 2013 at 4:18 AM

Didn't work for me , no error message though

Editorial Team MOD
September 15, 2013 at 3:28 PM

Yes use this css for Related post imgs

#related-posts img { }

September 28, 2013 at 7:17 AM

Its not working in my blog.i am using Videoism Template. my blog- reply pls

Editorial Team MOD
September 28, 2013 at 11:28 PM

Videoism is totally different template. Its for simple Blogs

October 4, 2013 at 7:04 AM

Hi! how to adjust thumbnail size...?

Editorial Team MOD
October 14, 2013 at 5:20 PM

Through CSS

#related-posts img { width:auto; height:auto;}

October 14, 2013 at 8:07 PM

Thank you sir!

October 17, 2013 at 11:35 PM

This does not work for me....

October 18, 2013 at 10:50 AM

I put everything in, didn't get an error but nothing is showing up. What should I do next?

Editorial Team MOD
October 20, 2013 at 10:21 PM

What's your BLOG URL? Remember this widget use Labels to display related posts. If you have tagged more posts with similar labels only then it will display them

November 16, 2013 at 9:01 PM

Hi there !
I've followed your instructions and placed the codes perfectly. But sadly,its not working. I means its not appearing

Editorial Team MOD
November 19, 2013 at 11:29 AM


Actually this works with Labels, If your posts are not tagged with any Label that it cannot display any related posts. If you setup 3 related posts to show up but your Label has just 1 Related post than it cannot be shown

Example a Label "Technology" has 10 Related posts so it will easily shuffle up and display them accordingly

So, Make sure you have having your labels. If yes? Then provide you URL for futher investigation

December 26, 2013 at 6:56 AM

I placed your code in my blog. It worked, but the thumbnail pictures with bad quality not like you. Can you help me ?
My blog :

Editorial Team MOD
December 26, 2013 at 8:21 AM


Well yes that happens because of Blogger API for picture allows pictures to be in very small size. We have a hack for it, which will release in coming weeks.

So do visit us on this Monday. You will see a new article related to fix blurry photos in Blogger.

December 30, 2013 at 9:50 PM

Hi this is not working for me also, it is not showing anything just blank space, i am removing it sorry.

Editorial Team MOD
December 31, 2013 at 10:09 PM


This works with the help of Labels. If you have labled your posts and it has more than 5 posts under the same label it will then display the Related posts.

Hope that helps.


January 10, 2014 at 9:47 PM

The widget works good... :)
But the only problem is that the post thumbnail aspect ratio changes and the image does not have a clear look. You can take a look on my blog blog

January 10, 2014 at 11:35 PM


I have pasted respective codes as instructed and used same label for all my 6 posts. But still, i am unable to see related posts in my blog. what may be the reason?

January 20, 2014 at 1:14 PM

Great work Bro

Editorial Team MOD
January 27, 2014 at 2:42 PM

Make sure your posts has images and those images are uploaded to your blogger account.

February 14, 2014 at 7:16 PM

Nothing happen with my blog, after applied the instruction!! can you help me?
During apply the instruction, i got no any error?

Editorial Team MOD
February 14, 2014 at 10:58 PM

First, Are you applying the instructions correctly? If yes then you need to have Labels to display Related posts. It works with Labels and shows related posts only if you have 5 posts in a common label and that label is being used at the post that you are viewing.

February 26, 2014 at 7:25 AM

doesn't show in my blog.please help me to solve this matter

February 26, 2014 at 7:27 AM

this is my blog url

February 27, 2014 at 12:04 AM

Today, I tried to apply this trick on my page: and it is not work at all. Same with Neak Pleng. Is the trick not work anymore? Please help, I am a newbie.

February 27, 2014 at 12:19 AM

Oh.. there is two div class='post-footer-line post-footer-line-1' in my template. The problem is solved. Thanks.

March 5, 2014 at 11:24 AM

It's not working for me either. I'm on Blogger.

Editorial Team MOD
March 6, 2014 at 9:45 AM

Remember this widget use Labels to display related posts. If you have tagged more posts with similar labels only then it will display them

April 14, 2014 at 5:52 AM

not working , nothing came is my blog :
I really appreciate if you can help..tq

Editorial Team MOD
April 15, 2014 at 6:00 AM

1.It could be because of there are multiple

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

Tags so please add the code after the each tag,

2. Remember this widget use Labels to display related posts. If you have tagged more posts with similar labels only then it will display them

April 22, 2014 at 5:55 AM

@Syed, We have installed the same code that you have been provided above. Can you please tell us why the thumbnails in our blog doesn't displaying properly. We mean that are not displaying in correct dimension. See our blog and give the solution for it.

Editorial Team MOD
April 22, 2014 at 8:29 AM

You need to use CSS

#related-posts img {

May 17, 2014 at 2:47 AM

Amazing! The only widget that worked! Now the big question. Many of my post doesn't have pictures so its showing as "No Image". If I update those posts with a picture then how does the widget update it? and When?

May 18, 2014 at 2:24 PM

Most of them can't see the related posts even when they are implementing the code as per the instructions the main reason is that due to new templates which are of responsive the element is present in mobile-posts tag ....So in order to work the code we need to place the code right under the correct element which again related to element. So first search for then insert code after It will work for sure :)

July 18, 2014 at 8:32 AM

It worked! I pasted the code below all div class='post-footer-line post-footer-line-1. Thank you! ^^ Great Site!

October 4, 2014 at 2:11 AM

Please check my blog ( because not showing

Editorial Team MOD
October 4, 2014 at 4:37 AM

It worked! I pasted the code below all div class='post-footer-line post-footer-line-1. !

May 31, 2015 at 5:06 PM

It is not working on my web. my url is

Editorial Team MOD
June 3, 2015 at 1:10 AM

Make sure your posts has images that are uploaded by yourself, not from external image source.

October 1, 2015 at 4:32 AM

Hey, it doesn't work for me to..
I have a labels in every post and the images, and I pasted the code below all div class='post-footer-line post-footer-line-1. too..

December 14, 2015 at 7:56 AM

Hello Admin;

I have successfully implemented the code.. Now it is just showing Post Titles without thumbnails.. How to make changes in code as that would also show post thumbnail for related posts.

January 28, 2016 at 5:07 AM


I followed the steps, but it's not working for my blog as well :(

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.