How To Add Related Articles in Blogger.

There are some people who always ask how many blogs can display something like a list of "Related Articles" every time under the post. This not only helps users find the next relevant topic but also can make visitors for a longer period of time. 

Technically, there are many ways to display related articles or posts, but most are not too targeted. Either they don't attract people or they give results that are totally irrelevant. 

Why Add Related Articles below the posts on Blogger? 
Sometimes you might want to give some additional articles to visitors, so they can spend more time on your site.

Engaging readers for a longer period of time is something that is very useful for the growth of traffic on your blog. The more time people spend on your blog, the more quality you give to your blog. 

There are some privileges to display related articles below your posts, because this really makes your site look professional plus has a positive effect for visitors who are looking for something related to their search. 

How to Add Related Articles to Blogger? 

The first thing you need to do is log in to your Blogger account and go to >> Template >> Edit HTML, to make it easier to search, press CTRL F and search </ head> just above the code, 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 == & quot; item & quot;'> 
<script type = 'text / javascript'> 
var defaultnoimage = & quot; http: //3.bp.blogspot. com / -PpjfsStySz0 / UF91FE7rxfI / AAAAAAAACl8 / 092MmUHSFQ0 / s1600 / no_image.jpg & quot ;; 
var maxresults = 3; 
var splittercolor = & quot;
var relatedpoststitle = & quot; Related Articles: & quot ;; 
</ 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] = $ thumbnail.url; entry.media 

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, cb-5);

{thumburl [relatedTitlesNum] = d;} else {if (typeof (defaultnoimage)! == 'undefined') thumburl [relatedTitlesNum] = defaultnoimage; else thumburl [relatedTitlesNum] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7rwweZfZfA_0Jy5aTNE3RMyxCmWzsDxq_23XEqEK8pjzjAwT7cqJZ3fkeYt5Cu_e5iNNFxYTi-kPsV4xGmdkyE5GvdVZZecVC9RQI0hm061_lwkwZWP855TxNwfiLXWpCGVmekLTsqsI/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 ('<
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>

Still on page Edit HTML search for <data: post.body /> and below it paste the following HTML Code. If you don't 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;'> 
</ 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> </ b: if>

You have successfully displayed related articles under the posts on blogger. Please review your post to see if everything works in sequence or not.