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.<style>
#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;
}
</style>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0_1ZZi5kJd5vSmPoTg8SqMclUVso0mDqeAQbJD5Ux75-rKTm638bz6AP-iJl2c9G0YC0lfYD0whzhfuVqnlN0o0uO8aK_6HNTQSC8sldePc1pnujpUzm6yUQwbqHmv1snC4ADjtPidyQH/s1600/no_image.jpg";
var maxresults=3;
var splittercolor="#fff";
var relatedpoststitle="Related Articles:";
</script>
<script type='text/javascript'>
//<![CDATA[
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;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
catch (error){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))
{thumburl[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0_1ZZi5kJd5vSmPoTg8SqMclUVso0mDqeAQbJD5Ux75-rKTm638bz6AP-iJl2c9G0YC0lfYD0whzhfuVqnlN0o0uO8aK_6HNTQSC8sldePc1pnujpUzm6yUQwbqHmv1snC4ADjtPidyQH/s1600/no_image.jpg";}
}
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;
relatedTitlesNum++;
}
}
}
}
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;
thumburl=tmp3;
}
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++)
{
if((relatedUrls[i]==current)||(!relatedTitles[i]))
{
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
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>');
i++;
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
}
document.write('</div>');
relatedUrls.splice(0,relatedUrls.length);
thumburl.splice(0,thumburl.length);
relatedTitles.splice(0,relatedTitles.length);
}
//]]>
</script>
</b:if>
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 == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div></b:if>
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).
50 comments
Is there any way to customize the related post thumbnails? because I use
.post-body img {
max-width: 635px!important;
height: auto!important;
}
Hmm...didn't work for me:(
What error you are facing?
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...
Didn't work for me , no error message though
Yes use this css for Related post imgs
#related-posts img { }
Its not working in my blog.i am using Videoism Template. my blog- www.mashithandu1.blogspot.com. reply pls
Videoism is totally different template. Its for simple Blogs
Hi! how to adjust thumbnail size...?
Through CSS
#related-posts img { width:auto; height:auto;}
Thank you sir!
This does not work for me....
I put everything in, didn't get an error but nothing is showing up. What should I do next?
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
Hi there !
I've followed your instructions and placed the codes perfectly. But sadly,its not working. I means its not appearing
Hi,
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
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 : http://coverdepmoingay.blogspot.com/
Hi,
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.
Hi this is not working for me also, it is not showing anything just blank space, i am removing it sorry.
Hi,
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.
Cheers!
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
Hi,
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?
Great work Bro
Make sure your posts has images and those images are uploaded to your blogger account.
Nothing happen with my blog, after applied the instruction!! can you help me?
During apply the instruction, i got no any error?
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.
doesn't show in my blog.please help me to solve this matter
this is my blog url leadsquote.com
Today, I tried to apply this trick on my page: http://novehasanah.blogspot.com and it is not work at all. Same with Neak Pleng. Is the trick not work anymore? Please help, I am a newbie.
Oh.. there is two div class='post-footer-line post-footer-line-1' in my template. The problem is solved. Thanks.
It's not working for me either. I'm on Blogger. www.ivy-and-co.com
Remember this widget use Labels to display related posts. If you have tagged more posts with similar labels only then it will display them
not working , nothing came up...here is my blog : http://kenny977.blogspot.com..
I really appreciate if you can help..tq
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
@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.
You need to use CSS
#related-posts img {
width:200px!important;
height:180px!important;}
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?
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 :)
It worked! I pasted the code below all div class='post-footer-line post-footer-line-1. Thank you! ^^ Great Site!
Please check my blog (nolirik.blogspot.com) because not showing
It worked! I pasted the code below all div class='post-footer-line post-footer-line-1. !
It is not working on my web. my url is www.khagendraraj.com.np
Make sure your posts has images that are uploaded by yourself, not from external image source.
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..
www.ndudlagirl.blogspot.com
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.
Hello,
I followed the steps, but it's not working for my blog as well :(
I have setting the code on your blog but it have not been shown, check here: blog
hi not displaying, then i read your reply on other comments. i played around and wallah! it appeared. thanks a million. i pray you have a great day today for making me happy tonight
@FATEEMA HAFIZ I am glad to know it worked for you in the end.
-Syed
I have setting the code on your blog but it have not been shown, check here : blog
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.