How to add automatically Related post in the middle of an article on blogger Website.

Hello, I am Farooq Ahmed. In today's article I will teach you how to to automatically show links to more articles related to the same Categories.

How to add automatically Related post in the middle of an article on blogger Website.

If someone sees your article, he can visit that article if there are more articles that he likes. So auto related posts are very important.

Let's Start For Setup

1. Login Blogger Dashboard

2. Click On Menu Bar

3. Go to theme Option

4. Click On 🔻 Arrow Button

5. Click On Theme Backup & download

6. Click On Edit HTML

7. Find Out Closing Head Teg <head/>

8. Copy the following code and paste it above the head Teg.

Style 1 Demo

Style 1 css Code

<b:if cond='data:blog.pageType != "index"'> <style type='text/css'> /* Related Post Inline */ .related-simplify{display:inline-block;background:;position:relative;padding:0;margin:36px auto 26px auto;width:100%;box-shadow:0 0 20px -5px rgba(0,0,0,0.3);transition:all 0.3s cubic-bezier(.25,.8,.25,1);border-top:2px solid #f22830}.related-simplify:hover{box-shadow:0 0 15px -5px rgba(0,0,0,0.5)}.related-simplify h4{background:#f22830;padding:4px 15px;position:absolute;margin:0;font-size:13px;font-weight:500;color:#fff;top:-14px;left:2.8%;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.17)}.related-simplify ul{margin:0;padding:0}.related-simplify ul li{position:relative;list-style:none;padding:0;margin:auto;line-height:1.4em;transition:all .3s}.related-simplify a{color:;font-size:14px;font-weight:500}.related-simplify a{display:block;color: ;font-size:14px;font-weight:500;padding:5px 15px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.related-simplify ul li:nth-child(n+5) a{margin:0 auto 10px auto;}.related-simplify ul li:first-child a{margin:15px auto 0 auto;}.related-simplify ul li:nth-child(n+5) a:hover,.related-simplify ul li:first-child a:hover,.related-simplify a:hover{color:#aaa;padding-left:18px}.related-simplify ul li:nth-child(n+6){display:none} </style> </b:if>

Copy Problem Or Not Working So Download TXT file.

Download CSS Style 1

or Selecte CSS Style 2

See Demo👇

<b:if cond='data:blog.pageType != "index"'> <style type='text/css'> /* Related Post Inline */ .related-simplify{display:inline-block;position:relative;padding:0;border-radius:20px;margin:40px auto 30px auto;width:100%;box-shadow:0 0 8px -5px rgba(0,0,0,0.4)}.related-simplify h4{background:#f22830;padding:4px 15px;position:absolute;margin:0;font-size:13px;font-weight:500;color:#fff;top:-14px;left:6.8%;border-radius:99em;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.17)}.related-simplify ul{margin:0;padding:0}.related-simplify ul li{position:relative;list-style:none;padding:0;margin:auto;line-height:1.4em;transition:all .1s}.related-simplify a{display:block;color:#222;font-size:14px;font-weight:500;padding:5px 30px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:all .1s}.related-simplify ul li:nth-child(n+5) a{margin:0 auto 20px auto;}.related-simplify ul li:first-child a{margin:25px auto 0 auto;}.related-simplify ul li:nth-child(n+5) a:hover,.related-simplify ul li:first-child a:hover,.related-simplify a:hover{color:#aaa;padding-left:35px}.related-simplify ul li:nth-child(n+6){display:none} </style> </b:if>

Copy Problem Or Not Working So Download TXT file.

Download CSS Style 2

Now Paste Javascript Code

<b:if cond='data:blog.pageType != "index"'> <script type='text/javascript'> //<![CDATA[ // Related Post Inline var relatedSimply = new Array(); var relatedSimplyNum = 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]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; 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] = relatedSimply[i];}} relatedSimply = 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((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');} //]]> </script> </b:if><b:if cond='data:blog.pageType != "index"'> <script type='text/javascript'> //<![CDATA[ // Related Post Inline var relatedSimply = new Array(); var relatedSimplyNum = 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]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; 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] = relatedSimply[i];}} relatedSimply = 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((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');} //]]> </script> </b:if>

Copy Problem Or Not Working So Download TXT file.

Download Javascript

Now Find Out <data:post.body/> And Replace This Code. Remove <data:post.body/> Code And Past Bellow Code

<div expr:id='&quot;post1&quot; + data:post.id'/>

      <div class='related-simplify'>

         <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=5&quot;' type='text/javascript'/>

               </b:if>

               </b:loop>

               </b:if>

               <h4>Also Read</h4>

               <script type='text/javascript'>

               removeRelatedDuplicates();

               printRelatedLabels();

            </script>

      </div>

	   <div class='ty-copy-container row' style='font-size:4px; opacity:0;'><a href='https://www.akhelppoint.in/' rel='dofollow' title='related post in the middle'>related post in the middle</a>

                    </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.innerHTML=s.substr(r+4);}

</script>