This Website Template Download Here
DOWNLOAD

Welcome To Creator Faruk™

Hi Dear : A New Blog Where You Can Find Blogging Tutorials, Tips, Tricks,Templates and Many More...

  See More Tutorials Here →

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

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
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 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. 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. 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. 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>
Copy Problem Or Not Working So Download TXT file. Save The Template😍

Rate This Article

Thank You So Much How to add automatically Related post in the middle of an article on blogger Website. For Reading This Article.

About the Author

ভালোবাসার সকল ধরনের কবিতা পাবেন এখানেই। মনের মাধুরি মিশিয়ে লেখা ছন্দ কথামালায় সাজানো এই ওয়েবসাইটের সাথে থাকার জন্য ধন্যবাদ।

إرسال تعليق

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.
Youtube Channel Image
Creator Faruk Subscribe Now To Watch More Blogging Tutorials and Many More..
Subscribe