How to add Also Read button in blogger post automatically | Automatic intrenal LInking of blogpost.

How to add Also read button in middle area of blogger post.

DEMO

Hello friends,Welcome back to this blog "SAURABH TECHNOLOGY".In this article i will tell you how can we add ALSO READ button of related post randomly in blogpost area.First of all we will know that Why do we need to add Also Read button in post.

• Why do we need to add Also Read in Post Area.

 Also read button is very important because if any one of your posts gets ranked, then a visitor comes to your ranked post, then due to having a read button, the visitor is on your other post also read if they had interesed on your other post.

• What is the steps to add also read button in blogpost.

To add this button follow the steps given below.

• Steps are following:-

#1:- As usual,first of all we need to go to our blogger dashboard after login.

#2:-Then,GoTo "THEME" Option and Click on "EDIT HTML"

#3:-After that,Search 

<data:post.body/>

NOTE:- If this tag is more than one in your template then choose the last one.

#4:- And after find <data:post.body/> Paste the code which is given below just above this " 

<data:post.body/>"

<b:if cond='data:view.isPost'>

<script type='text/javascript'>

//<![CDATA[

// Multi Related Post

(function() {var jumlah = 4;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'] = 'awsomemultiRelated';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 awsomemultiRelated() {var text = 'Also read :';let r = Math['floor']((relatedTitles['length'] - 1) * Math['random']());let i = 0;let jumlah = document['querySelectorAll']('.awsomemultiRelated');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>

 

#5:-Now, Again Search this tag </head> .

#6:-After find this tag Copy the code which is given below and paste it just above of </head>.

<b:if cond='data:blog.pageType != &quot;index&quot;'> 

<style type='text/css'> 

/* Internal Links */ .awsomemultiRelated{background-image: linear-gradient(-20deg, #00cdac 0%, #8ddad5 100%);color:#000;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;overflow:hidden;transition:all .3s} .awsomemultiRelated:hover{background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);} .awsomemultiRelated .content{padding:12px 15px} .awsomemultiRelated .content .text{margin-right:5px} .awsomemultiRelated .content a{color:#000;text-decoration:none;line-height:1.5em} .awsomemultiRelated .content a:hover{text-decoration:underline} .awsomemultiRelated .icon{height:auto;min-width:55px;background:#f44336 url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z&#39; fill=&#39;%23fff&#39;/%3E%3C/svg%3E&quot;) center / 40px no-repeat;transition:all .3s} 
</style> 
</b:if>

#7:-Finally,Click on Save Template>

Conclusion:- Now your blog or website has Succesfully added,if you have any question regarding this tell me in comment section or in telegaram,insatagram,Twitter or Facebook page.

Thanks for visit and if you want more widget of blogger then tell me  and join our Newslater,Telegram,facebook page or Instagaram.