Automatically Add Related Articles in Middle of Post Blogger

How to Automatically Add Related Articles in Middle of Post in Blogger

Want to know How to Automatically Add Related Articles in the Middle of the Post? or How to add Inline related posts in the blogger? then In this tutorial, you learn about adding related posts in the middle of your article based on post categories to improve your bounce rate.

For WordPress, you can find many plugins to put Inline related posts in the article. But when we want to add Inline related post for the Blogger website then there is no plugin to do this. Also, it is very difficult to automatically show related posts in the middle of the post on the blogger website.

Automatically Add Related Articles in Middle of Post | Inline Related Post in Blogger

Nowadays many bloggers don't want to manually add related posts in the middle of the post with the "Also read" caption again and again in each post. So it will be great if your template automatically does this task for you Right!. By some modification in your template, you can easily include "ALSO READ" Article links in between your blog post.

Therefore If you don't know any programming knowledge then also you can easily add Inline related post for a blogger. So follow step by step tutorial and know the benefits of this.

Benefits of Inline Related Post with 'Also Read' Label in Blogger Website

Automatically show Also read article links in the middle of the post will be beneficial for your website and save your time. Following is a list of benefits you get.

• No need to manually add Also Read Article Links in the middle of the post
• It saves your time by adding related post as per post labels
• All is done automatically
• Increase Bounce Rate performance this will help you to rank higher in google search
• Good for SEO and Ranking
• Responsive Also read the section
• and many more benefits.

Now you can know Why you should add this automated script to your template. So let's start to modify the blogger template by following step by step procedure.

---

Steps to Inline Related Article in Middle of Post in Blogger

The following are some basic simple steps to follow and make changes in your website template.

NOTE: Before doing any changes in your template take a backup of your template/Theme.

1. Go to Blogger Dashboard
2. Go to Theme/Template Section
3. Click Edit HTML
4. Now Search for   </head>  or Find & Paste Below Code Block 1 STYLE CSS Code Before  ]]></b:skin> 
5. Now Find <data:post.body/>  and Replace with below mentioned 2nd code block
6. Save Theme/Template
7. Thant's it! – Now Check your website articles you can see Also read the section in the middle of your post.

STYLE / CSS / SCRIPT CODE – PLACE ABOVE </head>

/*Articles Related to Middle of Posts*/ 
.arpianz{background:#FFF;position:relative;display:inline-block;border:2px solid #DDD;margin:22px 0} 
.arpianz 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} 
.arpianz h4:before{content: '\f043';right: 10px;bottom: 0;font-family:FontAwesome;font-style: normal;font-weight: 400;margin: 0 10px 0 0;color: #fff;} 
.arpianz ul{padding:12px 41px 0;list-style:none} 
.arpianz ul a:before{font-family:fontawesome;content:'\25b6';padding-right:10px} 
.arpianz li{border-radius:5px;border-bottom:1px solid rgba(227,227,227,0.33);line-height:1.7em} 
.arpianz li:hover {text-decoration: underline;}

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<script type='text/javascript'> 
//<![CDATA[ 
// Articles Related to Middle of Posts by Technical Arp 
var arpianz = new Array(); var arpianzNum = 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]; arpianz[arpianzNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[arpianzNum] = entry.link[k].href; arpianzNum++; 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] = arpianz[i];}} arpianz = 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((arpianz.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < arpianz.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + arpianz[r] + '</a></li>'); if (r < arpianz.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');} 
//]]> 
</script> 
</b:if>

Code to Replace <data:post.body/>

<div expr:id='&quot;post1&quot; + data:post.id'/> 
<div class='arpianz'> 
<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>Also Read</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.innerHTML=s.substr(r+4);} 
</script>

That's It Just after the above-mentioned steps and you will be able to use this script in your blogger template.

More Useful Script to Increase website speed:

Lazy Load Google Adsense Ads

Defer google tag manager script

For a complete demo of the script with a proper installation and usage guide please watch the complete video.

 Add Related Articles in Middle of Post Script in Blogger

---

Now it's time for a conclusion Right!

In Conclusion of Automatically Add Related Articles in Middle of Post in Blogger

Before doing any changes take a backup of your website template, now without taking any help from plugins Sorry I forgot we don't have any plugins in the Blogspot platform to make our life easier. But we don't need any plugin to add related posts in the middle of blog posts just follow this simple guide for this.

NOTE: This script is tested in many Blogger templates and working fine but In case just in case if this script is not working with your template then don't panic and hate our website. Comment down if you face any problem using this script.

I have tried to be as informative as to provide all these scripts. Use the above-mentioned scripts and If you face any problems or have any suggestions. Let me know them in the comments section.

Thanks for Visiting: Follow by Email and Bookmark Our Technical Arp Website for more such useful scripts.

 

Read More:

Meme generator website script

Premium Keyword Generator website script

Automatic HTML Sitemap Page generator in blogger

Disable right-click, disable copy, disable view source shortcut

How to Add Countdown Timer Download Button

Also Read

• Tweet
• Share
• Share
• Share

Related Post