How to Automatically Add Related Article Links in Blogger

There are different ways to increase your website traffic and one of the ways to get page views and page visits is that you should include inbound links in your articles.

What are inbound links.?

Inbound links are the links of your website articles which are related to any article for example if you have an article about SEO then you have to include inbound links that are tagged as SEO.

If you are a wordpress user then you can find different in terms of plugins to automatically generate inbound links labelled as you may also like or related to.

But if you are blogger user is a bad news for you that blogger does not support any plugin miss you can install and generate inbound links automatically.

But we can create inbound links by using JavaScript code using JSON feed API.

Wanna see the demo of these inbound links?

If you want to see the demo of that you can see the thumbnail because I have captured the preview of this widget and added it into my thumbnail.

So now we have to look on the steps by which you can include inbound links into your blogger articles automatically.

So these are some steps that you have to follow to install this that into your blogger.

Steps to Follow:

Go to Blogger Dashboard
Go to Theme/Template Section
Click Edit HTML
Now Search for </body>

To search anything in blogger template section press Ctrl+F and then type term to search and press enter.

Now copy the code provided below and add it just above </body> tag.

<style>
/*Also Read*/
#also-read {
position: relative;
font-family: Arial, sans-serif;
}
#also-read h2 {
color: #777777;
position: absolute;
top: -15px;
left: 3.5em;
border: 2px solid #efefef;
padding: 2px 12px;
font-size: 14px;
background: #ffffff;
font-weight: bold;
z-index: 1;
}
#also-read a {
font-weight: bold;
font-size: 14px;
display: block;
padding: 0;
color:#49ACE1;
text-decoration:none;
outline:none;}
#also-read ul {
padding: 20px 20px 10px 40px;
position: relative;
border: 2px solid #efefef;
max-width: 100%;
margin: 1.5em 0 1.5em 0;
}
#also-read li {
padding: 0px;
margin: .6em 0;
}
</style>
<script type='text/javascript'>
//<![CDATA[
var readalsotitle='Also Read',relatedTitles=new Array,relatedTitlesNum=0,relatedUrls=new Array;function alsoread(e){for(var l=0;l<e.feed.entry.length;l++){var t=e.feed.entry[l];relatedTitles[relatedTitlesNum]=t.title.$t;for(var r=0;r<t.link.length;r++)if("alternate"==t.link[r].rel){relatedUrls[relatedTitlesNum]=t.link[r].href,relatedTitlesNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),l=new Array(0),t=0;t<relatedUrls.length;t++)contains(e,relatedUrls[t])||(e.length+=1,e[e.length-1]=relatedUrls[t],l.length+=1,l[l.length-1]=relatedTitles[t]);relatedTitles=l,relatedUrls=e}function contains(e,l){for(var t=0;t<e.length;t++)if(e[t]==l)return!0;return!1}function printRelatedLabels(e){for(var l=0;l<relatedUrls.length;l++)relatedUrls[l]==e&&(relatedUrls.splice(l,1),relatedTitles.splice(l,1));var t=Math.floor((relatedTitles.length-1)*Math.random());l=0;if(relatedTitles.length>1){for(document.write("<h2>"+readalsotitle+"</h2>"),document.write("<ul>");l<relatedTitles.length&&l<20&&l<readalsocount;)document.write('<li><a href="'+relatedUrls[t]+'" title="'+relatedTitles[t]+'">'+relatedTitles[t]+"</a></li>"),t<relatedTitles.length-1?t++:t=0,l++;document.write("</ul>")}relatedUrls.splice(0,relatedUrls.length),relatedTitles.splice(0,relatedTitles.length)};
//]]>
</script>
<div id='also-read'>
<script type='text/javascript'>
var readalsotitle="You May Also Like";
var readalsocount=10;
removeRelatedDuplicates();
printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
  <b:if cond='data:post.labels'>
  <b:loop values='data:post.labels' var='label'>
   <b:if cond='data:view.isPost'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=alsoread&amp;max-results=100&quot;'/>
   </b:if>
  </b:loop>
 </b:if>
</div><script>
//<![CDATA[
function insertAfter(addition, content) {
    var parent = content.parentNode;
    if (parent.lastChild == content) {
        parent.appendChild(addition);
    } else {
        parent.insertBefore(addition, content.nextSibling);
    }
}
function insertAbove(addition, content) {
    var parent = content.parentNode;
 parent.insertBefore(addition, content);
}
function insertBellow(addition) {
    var parent = content;
 parent.appendChild(addition);
}
var iklan1 = document.getElementById("ID_OF_YOUR_SELECTED_ELEMENT");
var iklan2 = document.getElementById("ID_OF_YOUR_SELECTED_ELEMENT");
var iklanAtas = document.getElementById("ID_OF_YOUR_SELECTED_ELEMENT");
var iklanBawah = document.getElementById("ID_OF_YOUR_SELECTED_ELEMENT");
var alsoread = document.getElementById("also-read");
var content = document.getElementById("body-post-it");
var locationa = content.querySelectorAll("br,p,div > br,div > div > br,div > div > div > br,div > p,div > div > p,div > div > div > p,span > br, span > p");
if (locationa.length > 0) {
 insertAbove(iklanAtas,content); 
 insertBellow(iklanBawah);
} 
if (locationa.length > lokasiIklanTengah1) {
    insertAfter(iklan1,locationa[lokasiIklanTengah1]);
} 
else {
 iklan1.innerHTML = "";
}
if (locationa.length > 10) {
    insertAfter(iklan2,locationa[10]);
} 
else {
 iklan2.innerHTML = "";
}
if (locationa.length > lokasiIklanTengah2) {
    insertAfter(alsoread,locationa[lokasiIklanTengah2]);
} 
else {
 alsoread.innerHTML = "";
}
//]]>
</script>

Save Theme/Template

Here in the above code the code which I have highlighted are the tags after which these inbound links will be shown you can add or remove any HTML tags according to your requirements.

Wind Up:

So in the end I want to say that if you want to get more visitors on your blog articles and want to customise your blogger blog than this widget is very much useful for you.

I hope that it may help you and solved your issue.

source:softwebtuts.com

A4F

How to Automatically Add Related Article Links in Blogger