How To Add Related Articles To Middle Of Blogger Blog Post

After creating a new blog on Blogger, we write good posts (articles) in it. And when our blog gets old and the number of posts in it increases, then we think we should add a link to another article in all the posts. And it is also very important.

When we are new in blogger, we do not know much. How to do that. But slowly working on the blogger and if we understand it well then we can learn everything. And you can add everything on your blog that is beneficial for our website, its posts and its readers.

So in this post today, we will know how to automatically add a link to another post in any blog post and what are its benefits.

Benefits of adding a link to an old post in every blog post :-

To make your website at the top level, the blogger makes every effort which is necessary and one of these is to add a link to other posts in every post. When a visitor comes to your blog and reads your post, then in the middle of that post there is a link to the post related to that post, then visitors will like any of those posts. So he will definitely click on that link and will definitely read your post as well. This will increase the pageviews of your blog and with this the reader will spend a lot of time on your site. With which the bounce rate of your site will also be good and the ranking of the blog will also be good.

How To Add Related Articles To Middle Of Blogger Blog Post

• Login to your blogger blog Dashboard.
• Then go to Theme > > Edit HTML.
• Click anywhere inside the code area and press Ctrl + F keys to open the search box.
• Now, Search for ]]></b:skin> tag and paste below code just above of this tag.

/*Articles Related to Middle of Posts*/
.tgrelatedmiddle {background-color:#f5f5f5; border:1px solid #e5e5e5; display:block; margin:20px 0px; padding:10px 20px;}
.tgrelatedmiddle .judul {color:#f44336; font-size:120%; font-weight:600; text-transform:uppercase}
.tgrelatedmiddle ul {margin:10px 0px 0px !important; padding:0px !important;}
.tgrelatedmiddle ul li {list-style:none; padding:5px 0px !important; border-bottom:2px dotted #aaa !important; text-align:left !important; line-height:1.25em !important;}
.tgrelatedmiddle ul li:first-child {padding-top:0px; !important;}
.tgrelatedmiddle ul li:last-child {padding-bottom:0px !important; border:0px !important}
.tgrelatedmiddle ul li a:before{content:''; display:inline-block; width:17px; height:17px; margin-right:3px; vertical-align:-3px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%23333'/%3E%3C/svg%3E") center / 20px no-repeat;} 

• Now, Search for <data:post.body/> tag and replace it with the below code.

Note :- If you see this code one or more times, Select the code that appears in the last.

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
// Articles Related to Middle of Posts by tgrelatedmiddle
var tgrelatedmiddle = new Array(); var tgrelatedmiddleNum = 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]; tgrelatedmiddle[tgrelatedmiddleNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[tgrelatedmiddleNum] = entry.link[k].href; tgrelatedmiddleNum++; 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] = tgrelatedmiddle[i];}} tgrelatedmiddle = 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((tgrelatedmiddle.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < tgrelatedmiddle.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + tgrelatedmiddle[r] + '</a></li>'); if (r < tgrelatedmiddle.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>
<div expr:id='"post1" + data:post.id'/>
         <div class='tgrelatedmiddle'>
            <b:if cond='data:post.labels'>
            <b:loop values='data:post.labels' var='label'>
            <b:if cond='data:blog.pageType == "item"'>
               <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=3"' type='text/javascript'/>
                  </b:if>
                  </b:loop>
                  </b:if>
                  <h4>Also Read</h4>
                  <script type='text/javascript'>
                  removeRelatedDuplicates();
                  printRelatedLabels();
               </script>
         </div>
         <div expr:id='"post2" + data:post.id'><p><data:post.body/></p></div>
         <script type='text/javascript'>
            var obj0=document.getElementById("post1<data:post.id/>");
            var obj1=document.getElementById("post2<data:post.id/>");
            var s=obj1.innerHTML;
            var t=s.substr(0,s.length/2);
            var r=t.lastIndexOf("<br>");
            if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
         </script>

• Click Save Theme.