Adsterra Advertisement
Blogger

In Article Related Post For Blogger – Best Tips And Tricks 2021

Today I will share with you How To Automatically Add Related Articles To Middle Of Post For Blogger or In Article Related Post For Blogger. Best Tips And Tricks in 2021.

In Article Related Post For Blogger

A Website developers put a lot of effort into creating a website and one of them is Automatically Add In Article Related Posts For Blogger Theme. In this post, I will discus with tow method.Lets do;

Advertisement

Table Of Content(toc)


Benefit of adding In Article Related Post / Related Articles To Middle Of Post For Blogger

When a visitor visits your blog site and opens a post, and in the middle of the post there is a link to that post related to that post, visitors can easily find their related posts from that related post and of course visitors will read your post.

Advertisement

This will be the internal linking of your website which is effective for on page seo and will also increase the page view of the site.  Which will be a good income from Adsense.

Method 1 

 

How To Add Related Article In Middle Of Post For Blogger 

Step 1 : Got Blogger Dashboard > THEME > Edite HTML 

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)

Working HTML Code Here :  https://codepen.io/blogxbd/pen/LYLKagj

Note : If you see <data:post.body/> code one or more times, Select the code that appears in the last.(alert-passed)

Step 3 : Now Search for ]]></b:skin> 

Then You need to include just before the ]]></b:skin> tag. Here paste blew code. 

CSS Code : 

/*Articles Related to Middle of Posts By HaxBD.com */

.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)

Working CSS Code Here : https://codepen.io/blogxbd/pen/LYLKagj

Method 2 

 

How to Automatically Add Related Post in Middle of Article Widgets For Blogger

Step 1 : Got Blogger Dashboard > THEME > Edite HTML 

Step 2 : Now search for <head> tag and paste blew HTML Code after the <head> section. 

HTML Code : 

<b:if cond=’data:blog.pageType == &quot;item&quot;’> 

<script type=’text/javascript’> 

//<![CDATA[ 

// InArticles Related to Middle of Posts by https://www.bloggerspice.com/ 

var bspostRelatedIn = new Array(); var bspostRelatedInNum = 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]; bspostRelatedIn[bspostRelatedInNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == ‘alternate’) {relatedUrls[bspostRelatedInNum] = entry.link[k].href; bspostRelatedInNum++; 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] = bspostRelatedIn[i];}} bspostRelatedIn = 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((bspostRelatedIn.length – 1) * Math.random()); var i = 0; document.write(‘<ul>’); while (i < bspostRelatedIn.length && i < 3) { document.write(‘<li><a href=”‘ + relatedUrls[r] + ‘”>’ + bspostRelatedIn[r] + ‘</a></li>’); if (r < bspostRelatedIn.length – 1) { r++; } else { r = 0;} i++;} document.write(‘</ul>’);let element = document.createElement(‘a’);element.href = ‘https://www.bloggerspice.com/’;element.pathname = ’embed’ + element.pathname;console.log(element.toString());}//]]> 

</script> 

</b:if>(code-box)

Working HTML Code : https://codepen.io/blogxbd/pen/eYRwXbJ

Step 3 : Now Search for ]]></b:skin> 

Then You need to include just before the ]]></b:skin> tag. Here paste blew code. 

CSS Code : 

/*Start Contextual Related Post by https://www.bloggerspice.com/ */ 

.bspostRelatedIn{text-align: left;

    padding: 15px;

    margin: 30px 0;

    border: 1px solid #ddd;

    border-radius: 3px;

    font-size: 15px;

    position: relative;} 

#bspostRelatedIn_title{font-size: 16px;

    margin: 0;

    display: inline-block;

    padding: 0 10px;

    position: absolute;

    top: -14px;

    left: 10px;

    background-color: #fefefe;

    color: #7d7d7d;} 

.bspostRelatedIn ul {

    list-style: none;

    padding: 3px 22px 0;   

.bspostRelatedIn li{ border-radius: 5px;

    line-height: 1.7em;

    margin-bottom: 0.433333em;

    list-style: disc;

.bspostRelatedIn li:hover {text-decoration: underline;}

/*End Contextual Related Post by https://www.blogrbd.com/ */(code-box)

Working CSS Code : https://codepen.io/blogxbd/pen/eYRwXbJ

Demo ➤ 

In Article Related Post For Blogger

Conclusion : In this post – We are talking about How To Automatically Add Related Articles To Middle Of Post For Blogger / In Article Related Post For Blogger –  Read More Blog Post. You can Applied easily and add related post in article blogger. If you have any problem using those code. Please comment blew or Contact with us. 

Advertisement

Related Articles

One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Advertisement
Back to top button