Advertisement

How to add Related post Blogger script

Masroor Alam
0

Blogger Related Posts Widget is a script that displays a list of related posts between the current post. It does so by finding posts with matching labels.it helps to SEO in blogger & user engagement on your blog.

— How to add an automatic post-break link(inline-related post) in Blogger?

How to add Related post Blogger script
Image source - letmeask

If you are a blogger and want to add a related post in the Middle of the current post then this article may be useful for you, 

Writing blog posts without any internal links pointing to other articles of similar interest will not encourage readers. It is always good for every single post on a website to be linked to other similar posts. Otherwise, the article or post will be an "Orphan article" which will also affect the SEO. So, adding "post-break links"(inline-related posts) should always be a habit for every blogger.


Google uses links to find out what content on your site is related and the value of that content.  Setting up internal links should be in such a way that not only the Googlebot can understand the relationship between posts and pages, their relevance and value, but your readers as well.


You may have been doing this the manual way! But have you ever thought of it to be cumbersome? Yes, of course, it is really stressful to have to insert post-break links(in-article links or inline links) related to the article you are writing manually. That is why today on this page, we are going to show you how to add automatically post-break links in Blogger.



Related post Scripts for Blogger, 


You need to add bellow script in blogger template, love your blogger account, edit Html blogger theme, find out </Head> Above the head pest bellow script no-01


Script No-01 ( pest above the </head> tag


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

<style type='text/css'>

/* Blogger auto post break link*/

.autoblk{background-color:#2a2a2a;color:#fff;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;overflow:hidden;transition:all .3s}

.autoblk:hover{background-color:#222}

.autoblk .content{padding:12px 15px}

.autoblk .content .text{margin-right:5px}

.autoblk .content a{color:#fff;text-decoration:none;line-height:1.5em}

.autoblk.content a:hover{text-decoration:underline}

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


You can customise further the look of the widget by changing the colours and more.

Next, search for <data:post.body/> tag and paste the following code just below it. If you find more than one of these tags (<data:post.body/>) then paste the code below each of them and save your template.


Code to paste below <data:post.body/> tag:


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

<script type='text/javascript'>

//<![CDATA[

// Auto post break link

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


After you have pasted all the code at their respective places, save the template and you are done.

You can customise the different colours(text colour and background colour) of the break link widget. To do that, all you need is to edit this part of the CSS found in the code you placed above the closing head tag.

As for the number of internal break links to display, you can change it on the second code. Just change the value of the variable underlined in red(var Jumlah = 4) to the desired numbers of break links you will like to display.

 

Tags

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
Post a Comment (0)

Advertisement

Advertisement

👇
Legal Notice

Legal Copyright Disclaimer: LetMeAsk is a tech website that publishes tutorials, news, and reviews. We do not verify if apps, services, or websites hold the proper licensing for the media that they deliver. We do not own, operate, or re-sell any streaming site, service, app, or addon. 

Each person shall be solely responsible for media accessed and we assume that all visitors are complying with the copyright laws set forth within their jurisdiction. Referenced applications, add-ons, services, and streaming sites are not hosted or administered by LetMeAsk.

Our website uses cookies to enhance your experience. Learn More
Accept !