Automatically Add Related Posts in Blogger

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.

/*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.