How To Display Related Articles Below Posts Inwards Blogger

People ever wonder that how many blogs are able to display something similar a listing of “Related Articles” simply beneath each as well as every post. It non solely helps the user to honor the adjacent relevant topic but besides engage them for a longer period. Recently, ane of our users asked us that How to Display Related Articles Below posts inward Blogger? Technically, at that topographic point are a lot of ways of displaying related articles or posts but most of them are non highly targeted. Either they don’t attract people or they render totally irrelevant results. Today inward this article, nosotros volition exhibit you lot How to Display Related Articles below posts inward Blogger?

Why to Add Related Articles below posts inward Blogger?

Sometimes you lot may desire to plough over to a greater extent than or less extra materials to your visitors thus that they tin engage as well as pass to a greater extent than fourth dimension on your website. Engaging readers for a longer catamenia of fourth dimension is something that is extremely useful for non solely growth but increase inward the revenue of a website. The to a greater extent than fourth dimension people pass on your site, the to a greater extent than risk of getting proficient sales through affiliates, Adsense or etc.

When people are engaged on your site, it way that your bounce charge per unit of measurement would acquire downwards which is indeed a cracking sign for those site owners who ever complain most high bounce rate. For those are non familiar alongside bounce charge per unit of measurement check this article.

Yet, these are the few perks of displaying related articles below your posts because it actually makes your site looks professional person summation render cracking appointment possibilities.

How to Add Related Articles Below posts inward Blogger?

The First affair you lot demand to practice is to login into your Blogger draw of piece of employment organization human relationship as well as acquire to >> Templates >> Edit HTML as well as search for the ending </head> tag as well as simply inward a higher house it glue the next code.

<style>
#related-posts {
float: left;
width: 650px;
border-bottom: 1px corporation #ddd;
height: 290px;
}
#related-posts h2 {
margin-top: 50px;
border-bottom: 0px;
border-top: 1px corporation #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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijEQ7HYzKtM3AMFjLYTUD40RNBcdQyxGp9W9ceTDmIn9HGskkmIfC9EwFDdNf0w3-NKBJHuH3ZtqBbU4swVw6KXVe3O8jE6W3UWdCg7eo-VS7Hd_YjMYQuhAPH1N272Chr_yES8xzsodrF/s1600/no_image.jpg&quot;;
var maxresults=3;
var splittercolor=&quot;#fff&quot;;
var relatedpoststitle=&quot;Related Articles:&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = novel Array();
var relatedTitlesNum = 0;
var relatedUrls = novel Array();
var thumburl = novel Array();
component division 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;}

select grip of (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/AVvXsEijEQ7HYzKtM3AMFjLYTUD40RNBcdQyxGp9W9ceTDmIn9HGskkmIfC9EwFDdNf0w3-NKBJHuH3ZtqBbU4swVw6KXVe3O8jE6W3UWdCg7eo-VS7Hd_YjMYQuhAPH1N272Chr_yES8xzsodrF/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++;

}
}
}
}
component division removeRelatedDuplicates_thumbs() {
var tmp = novel Array(0);
var tmp2 = novel Array(0);
var tmp3 = novel 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;

}
component division contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) render true;
render false;
}

component division 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;"/>');
spell (i < relatedTitles.length && i < xx && 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 simply below it glue the next HTML Coding. In case, you lot are unable to honor <data:post.body/>,  then you lot tin glue it simply 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>

Congratulations: You bring successfully learned how to display related Articles below posts inward blogger. Go as well as preview your posts to come across everything is working inward an social club or not.

We promise this tutorial has helped you lot inward displaying related Articles below posts inward blogger. Related articles helps a lot inward reducing your bounce charge per unit of measurement as well as gives a lot of cracking sales. If you lot bring whatever questions, thus practice non experience shy to ask.