Automatically Add Related Posts in Blogger

Posted on

 

Hii Friends ,

So today I will tell you that how can you automatically add Related Posts in your Blogger posts. It will be very helpful for your Blog . I know many of you don’t get time to do this manually on each and every post of yours .

What is Related Posts ?

Related Posts section will help your readers reading their choice of post and will help you too getting more traffic and creating Internal Backlinks. When reading up a post on your Blog , your visitor can most probably check out related posts and your traffic will be increased .

Is it must to use Related Posts ?

No , it’s not necessary to use this but I will recommend you to use  this for your Blog as I told you above that this is very helpful for your Blog. 

How to add Related Posts automatically to your Blog Posts ?

It’s very easy to add Related Posts in each of your Blog posts automatically.  You just need to follow some simple 2 steps I will tell you.

1. Go to Blogger Dashboard > Theme > Edit HTML.

2. Press CTRL+F and search for <data:post.body/> . You may find this code 2-3 times in your theme . You need to go to last one.

3. Now select the last <data:post.body/> in your theme . Copy the code given below and paste it there.

 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
// Articles Related to Middle of Posts by Anutrickz
var anutrickz = new Array(); var anutrickzNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; anutrickz[anutrickzNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[anutrickzNum] = entry.link[k].href; anutrickzNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = anutrickz[i];}} anutrickz = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((anutrickz.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < anutrickz.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + anutrickz[r] + '</a></li>'); if (r < anutrickz.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='anutrickz'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Related Posts</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.ierHTML=s.substr(r+4);}
</script>

Now you need to add some css to the theme .Just follow the below steps to add css to your theme.

1. Go to Blogger Dashboard > Theme > Customize.
2.Now go to advanced tab and select Add CSS option 
3. Now copy the CSS from below and paste it there and click on save.
/*Articles Related to Middle of Posts*/
.anutrickz{background:#FFF;position:relative;display:inline-block;border:2px solid #DDD;margin:22px 0}
.anutrickz h4{background:#393939;font-family:Poppins,sans-serif;color:#fff;font-size:12px;font-weight:700;position:absolute;top:-21px;left:2.5%;padding:8px 18px;border:1px solid #DDD;border-radius:5px;text-transform:uppercase}
.anutrickz h4:before{content: 'f043';right: 10px;bottom: 0;font-family:FontAwesome;font-style: normal;font-weight: 400;margin: 0 10px 0 0;color: #fff;}
.anutrickz ul{padding:12px 41px 0;list-style:none}
.anutrickz ul a:before{font-family:fontawesome;content:'25b6';padding-right:10px}
.anutrickz li{border-radius:5px;border-bottom:1px solid rgba(227,227,227,0.33);line-height:1.7em}
.anutrickz li:hover {text-decoration: underline;}

5. Now you have successfully added automatic related posts in your Blog.

Conclusion :- You must add Automatic Related posts to your Blog as it will help you too much in increasing traffic.

If you have any doubt or questions regarding this feel free to comment below