[Blogger Related Post ] How To Add Related Articles To Middle Of Blogger Blog Post

Now I am going to show you How To Add Related Articles To Middle Of Blogger Blog Post.After engendering an incipient blog on Blogger, we inscribe good posts (articles) in it.  And as our blog gets older and the number of posts on it increments, we cerebrate we should integrate a link to another article to all our posts.  And this is withal very consequential.

  We don't ken much when we're incipient to Blogger.  How to do that.  But gradually working on the blogger and if we understand it well, we can learn everything.  And you can integrate anything to our blog that is utilizable for our website, its posts and its readers.

Lets Start>

Step 1 :

--Go To Blogger dashboard > Theme > Edite HTML

And Press CTR + F for Search ]]></b:skin> In HTML Code On Your Template. 

Find ]]></b:skin> paste below code just above this tag.

Code: 

/*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;}(code-box)

 

Step 2 :

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

Code :

<b:if cond='data:blog.pageType == &quot;item&quot;'> <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='&quot;post1&quot; + 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 == &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>(code-box)

 Now Save the process and injoy ;*

Tag: 

Simple related post widget for Blogger

Ads middle post blogger

 Stylish related post in artical for Blogger

 How to add widget in Blogger Add Blogger Blogger widget