How To Add Related Posts Middle Of The Content In Blogger

If your website is hosted in blogger, then you need this Related post Middle of the content, to get more SEO and views.

You can create a great inline article link using the methods on this web page. This brings more benefits to your website.

First, we will see the benefits of the related post in the middle of the articles.

     • Get more optimised in search results
     • More than four views per visitor

This Blogger widget helps to improve your SEO rankings. This Blogger script comes with many SEO benefits. Therefore, it is commonly used by many bloggers around the world. This script automatically creates an internal link to your post on the website.

Steps To Add This Script Correctly in Blogger

Don't forget to take backup of your theme, by chance if any mistake was done , you can able to restore it.

    • Go to your blogger dashboard

    • Navigate to theme

    • Click on drop-down menu and

       select "edit html"

First we have to add CSS, copy below code and paste under   ]]></b:skin> tag of your blogs CSS.

        .rahul2{color:#000;background-color:#fefefe;padding:10px;margin-top:10px;margin-bottom:10px;border-radius: 10px;box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;text-align:center;}

After this you have to search for <b:defaultmarkups> <!--[ Blogger defaultmarkups ]--> <b:defaultmarkup type='Common'>

And paste the given script just below it.

<b:includable id='postTextRelated'>
        <div class='postRelated' id='postRelated'>
          <script>/*<![CDATA[*/ var relatedTitles = new Array(); var relatedTitlesNum = 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]; 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 < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');} /*]]>*/</script>
          <b:if cond='data:post.labels'>
            <b:loop index='i' values='data:post.labels' var='label'>
              <b:if cond='data:i&lt;1'>
                <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;' rel='preload'/>
              </b:if>
            </b:loop>
          </b:if>
          <div class="rahul2"><b class="title">Read Also</b>
          <script>removeRelatedDuplicates(); printRelatedLabels();</script></div>
        </div>
      </b:includable>

Now we have to find <data:post.body/>, and paste the below script just after the <data:post.body/> tag

<b:include cond='data:view.isPost and !data:view.isPreview' data='post' name='postTextRelated'/><script>/*<![CDATA[*/ function insertAfter(tbh,tgt) {var prt = tgt.parentNode; if (prt.lastChild == tgt) {prt.appendChild(tbh);} else {prt.insertBefore(tbh,tgt.nextSibling);}} var tgt = document.getElementById("postBody"); var midAd3 = document.getElementById("postRelated"); var showAd3 = tgt.getElementsByTagName("p"); if (showAd3.length > 0) {insertAfter(midAd3,showAd3[5]);}; /*]]>*/</script>

Save your theme.

Well done your Blogger template is Ready to Show a Stylish Related Post in the middle of the Content.

Additional Customisation

If you want to Change Read Also text on the related post section just Edit Read Also: text on the first Script.

If you wants to disable box-shadow just remove box-shadow{} from CSS.

Terms of use

To appreciate our works, consider keeping the credits in codes.

We don't allow to rewrite this post in any manner. Don't copy this post, codes or any part from this article without Permission, it is strictly prohibited. If you do so, Legal DMCA Actions will be taken.

Conclusion

This is all about How To Add Related Posts Middle Of The Content In Blogger. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box.