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

How to Make Automatic Related Posts in Blog Posts With Full Details :- 

Hello Friends Welcome To Dreamtrap Blog, Today we learn How to Add Related article links in blogger with full Explanation. Everybody know There are many ways to increase traffic in your blog post, so today i tell you increase traffic by add related post widget in blogger.

What is Related post widget for Blogger:-

This is the links which are added automatically on your blog-post. This link mainly added in the middle of post so can viewers click on this link easily by seeing your post. This is very helpful to increase blog traffic. This is also know as Inbound Link.

What is Related Post?

Related post is that post which is related to you label. I will explain you by example. suppose you make a post on label Bollywood movie then some related post on bollywood are shown in the middle of post whose label give a bollywood movie.

Related Post Demo-

I will give a Demo for you it help you for see how was look a related article widget in the middle of post. Demo link are given below if you want see then only click the below Demo Button.

Demo

Steps to install Related post article link in Blogger-

1. Open Blogger or go to Dashboard.

2. Now click on Theme Button.

3. Then Click Edit HTML Button.

4. Now Copy the Below Code and Go back to Edit HTML

  <b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* related and ads on middle postpage */
#inline_wrapper{display:block;padding:0;margin:0 auto}
.related_inline_wrapper{width:100%;display:block;overflow:hidden}
.related-post-by-title{margin:20px auto;display:block;position:relative}
.related-post-by-title ul{padding:18px 17px 17px 30px;border:2px solid #efefef;border-radius:5px;margin:0}
.related-post-by-title h4{border:2px solid #efefef;border-radius:5px;display:inline-block;background:#fff;padding:3px 15px;margin:0;position:absolute;top:-12px;left:40px;font-size:15px;font-weight:700}
.related-post-by-title li a{font-size:14px;font-weight:700!important;margin-top:10px!important}
.ads_middle{margin:15px auto 0;padding:0;text-align:center;display:block;position:relative;}
.ads_middle span{background:#ddd;color:#999;display:none!important;margin:15px 0 0;padding:0 9px!important;float:left;font-size:12px;}
@media screen and (max-width:600px){.related-post-by-title{width:100%;}}
</style>

<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var postCount=5;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];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;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]=relatedTitles[i];}}
relatedTitles=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((relatedTitles.length-1)*Math.random());var i=0;document.write('<ul>');while(i<relatedTitles.length&&i<postCount){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++;}else{r=0;}
i++;}
document.write('</ul>');document.write();};
//]]>
</script>
<div class='inline_wrapper' id='inline_wrapper'>
<div class='related_inline_wrapper' id='related_inline_wrapper'>
<!-- Related posts inline -->
<div class='related-post-by-title' id='related-post-by-title'>
<h4>Also Read:</h4>
<b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'/> <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=10&quot;' type='text/javascript'/></b:if> </b:loop> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div>
<!-- Related posts inline -->
</div>
</div>
<script type='text/javascript'>
function insertAfter(addition,target) {var parent = target.parentNode;if (parent.lastChild == target) {parent.appendChild(addition); } else {parent.insertBefore(addition,target.nextSibling);}}
var middleads = document.getElementById('inline_wrapper');var target = document.querySelector('.post-body');
var opsi1 = target.getElementsByTagName('br');if (opsi1.length > 0){insertAfter(middleads,opsi1[3]);}
var opsi2 = target.getElementsByTagName('blockquote');if (opsi2.length > 0){insertAfter(middleads,opsi2[0]);}
var opsi3 = target.getElementsByTagName('h2');if (opsi3.length > 0){insertAfter(middleads,opsi3[0]);}
</script>
</b:if> 

5. Now Search Var='post'

For Search anything in Blogger in theme section in computer press CTRL+F Then topic which you want search 'Example ' then press Enter

6. Now Paste the copy code Inside of Var='post'

7. At Last click save theme button.

Benefits of Related Articles link in blogger

1. Help to increase Traffic.

2. More chances to click on this related article.

3. Very helpful for Publisher.

4. Help to increase revenue

5. Easy process to install this on blogger.

Conclusion:

So After installing this widget on blogger you can see result on your blog website. My main motive only help you. i can't destroy any blogger policy or youtube policy. I respect this. This Script is not mine i find it on social network. you also find this script on social network . If i really help you then please subscribe my youtube channel or website.

IF you face problem to install this on you website the free to contact me. I rarely help you.

Note: created By- https://softwebtuts.blogspot.com/

Read also