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” but beneath each as well as every post. It non solely helps the user to notice the adjacent relevant topic but too engage them for a longer period. Recently, ane of our users asked us that How to Display Related Articles Below posts inwards 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 furnish totally irrelevant results. Today inwards this article, nosotros volition exhibit you lot How to Display Related Articles below posts inwards Blogger?

Why to Add Related Articles below posts inwards Blogger?

Sometimes you lot may desire to orbit roughly extra materials to your visitors thus that they tin orbit the sack engage as well as pass to a greater extent than fourth dimension on your website. Engaging readers for a longer menses of fourth dimension is something that is extremely useful for non solely growth but increase inwards the revenue of a website. The to a greater extent than fourth dimension people pass on your site, the to a greater extent than endangerment of getting practiced sales through affiliates, Adsense or etc.

When people are engaged on your site, it agency that your bounce charge per unit of measurement would become downwards which is indeed a bang-up sign for those site owners who ever complain most high bounce rate. For those are non familiar amongst 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 addition furnish bang-up appointment possibilities.

How to Add Related Articles Below posts inwards Blogger?

The First affair you lot demand to do is to login into your Blogger delineate of piece of occupation concern human relationship as well as become to >> Templates >> Edit HTML as well as search for the ending </head> tag as well as but higher upwards it glue the next code.

<style>
#related-posts {
float: left;
width: 650px;
border-bottom: 1px enterprise #ddd;
height: 290px;
}
#related-posts h2 {
margin-top: 50px;
border-bottom: 0px;
border-top: 1px enterprise #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/AVvXsEjCl2kiyH14i1l8QCUgOl8s4_Hsz-pRhsDG7TyOF0IVWhewwum2O7PZxQW2-269AqZVfGuJJwHHBEf7VpNiey6k7juPqNOKkdNiBUlmqekDOkoK3qr5jW4no2oE4mbC40A3M2mOgVu10Lie/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();
purpose 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;}

choose manage 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/AVvXsEjCl2kiyH14i1l8QCUgOl8s4_Hsz-pRhsDG7TyOF0IVWhewwum2O7PZxQW2-269AqZVfGuJJwHHBEf7VpNiey6k7juPqNOKkdNiBUlmqekDOkoK3qr5jW4no2oE4mbC40A3M2mOgVu10Lie/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++;

}
}
}
}
purpose 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;

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

purpose 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 < twenty && 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 but below it glue the next HTML Coding. In case, you lot are unable to notice <data:post.body/>,  then you lot tin orbit the sack glue it but 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 convey successfully learned how to display related Articles below posts inwards blogger. Go as well as preview your posts to encounter everything is working inwards an social club or not.

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

Comments