How To Add Automatically Related Articles In The Middle Of Posts

As Developer - Verify Premium Template.

Add Automatically Related Articles In The Middle Of Posts


Today you have to add the link of Related Articles inside the post. going to tell about it. Through the code given below, you can easily add related articles automatically to your blog post. By this code, automatically related articles will be added to your post. This code is based on CSS & HTML JAVASCRIPT. You can automatically add related articles to your blog by adding it to the theme.

Benefit of Automatically Add Related Articles

There are many benefits of automatically putting related articles in Blogger's post. If you automatically add related articles to your blog post. So automatically internal linking is done in your post. Which works to bring more and more traffic to your blog post. Google, Bing & other search engines crawl your post by automatically adding Related Articles. Due to which the chances of your post going viral increase.

How to Add Automatically Related Articles

To add related articles automatically, first you open your blog. Now go to the theme and click on edit HTML. Now add the code as given below.

How To Add Automatically Related Articles In The Middle Of Posts - iong.in



Css - Automatic Internal Linking on Blogger -


Paste the code given below on top of   </head>  

   <!-- Auto Internal Linking Css Start --> 
 <b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Multi Related Post - iong.in*/
.gourabdesignmultiRelated{color:#002bff;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;overflow:hidden;transition:all .3s}
.gourabdesignmultiRelated:hover{background-color:#feffe6} 
.gourabdesignmultiRelated .content .text{margin-right:9px}
.gourabdesignmultiRelated .content a{color:#f00;text-decoration:none;line-height:1.5em}
.gourabdesignmultiRelated .content a:hover{text-decoration:underline}
</style>
</b:if>
    <!-- Auto Internal Linking Css End -->

After adding Css, you have to search   <data:post.body/>    in the same html. If this code shows more than once in your template, then you have to check it by putting it under <data:post.body/> in turn. Save this by putting this code under <data:post.body/> where it works.

<!-- auto internal linking start - iong.in --> 
                
                <b:if cond='data:view.isPost'>
<script type='text/javascript'>
//<![CDATA[
// Multi Related Post
(function() {var jumlah = 5;let post = document['querySelectorAll']('.post-body br, .post-body p'),a = jumlah + 1,b = post['length'] / a;c = Array['from']({length: jumlah}, (redfx, blufx) => blufx + 1);
for (let d = 0; d < c['length']; d++) {let e = c[d],f = parseInt((b * e)),g = document['createElement']('div');g['className'] = 'gourabdesignmultiRelated';if (post[f]['nodeName'] == 'P') {post[f]['parentNode']['insertBefore'](g, post[f])} else {post[f]['parentNode']['insertBefore'](g, post[f]['nextSibling'])}}})();
var relatedTitles = new Array();var relatedTitlesNum = 0;var relatedUrls = new Array();function related_results_labels(nerdfx) {for (var desfx = 0; desfx < nerdfx['feed']['entry']['length']; desfx++) {var nefx = nerdfx['feed']['entry'][desfx];relatedTitles[relatedTitlesNum] = nefx['title']['$t'];for (var ciafx = 0; ciafx < nefx['link']['length']; ciafx++) {if (nefx['link'][ciafx]['rel'] == 'alternate') {relatedUrls[relatedTitlesNum] = nefx['link'][ciafx]['href'];relatedTitlesNum++;break}}}}
function removeRelatedDuplicates() {var viefx = new Array(0);var labfx = new Array(0);for (var desfx = 0; desfx < relatedUrls['length']; desfx++) {if (!contains(viefx, relatedUrls[desfx])) {viefx['length'] += 1;viefx[viefx['length'] - 1] = relatedUrls[desfx];labfx['length'] += 1;labfx[labfx['length'] - 1] = relatedTitles[desfx]}};relatedTitles = labfx;relatedUrls = viefx}
function contains(yelfx, yufx) {for (var grefx = 0; grefx < yelfx['length']; grefx++) {if (yelfx[grefx] == yufx) {return true}};return false}
//]]>
</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=related_results_labels&amp;max-results=100&quot;'/>
      </b:if>
    </b:loop>
  </b:if>
<script type='text/javascript'>
//<![CDATA[
(function gourabdesignmultiRelated() {var text = 'Also read :';let r = Math['floor']((relatedTitles['length'] - 1) * Math['random']());let i = 0;let jumlah = document['querySelectorAll']('.gourabdesignmultiRelated');while (i < relatedTitles['length'] && i < jumlah['length']) {for (let a = 0; a < jumlah['length']; a++) {jumlah[a]['innerHTML'] = '<span class="content"><span class="text">' + text + '</span><a href="' + relatedUrls[r] + '" title="' + relatedTitles[r] + '">' + relatedTitles[r] + '</a></span><span class="icon"></span>';if (r < relatedTitles['length'] - 1) {r++} else {r = 0};i++}}})();
//]]>
</script>
</b:if>
               <!-- auto internal linking end -->


Post a Comment

Previous Post Next Post