√ √ Membuat Multi Related Post Otomatis Diantara Paragraf Artikel

√ Membuat Multi Related Post Otomatis Diantara Paragraf Artikel

Posted by New's

Monday, December 28, 2020

syugulnajeh - Related post merupakan salah satu hal penting yang membuat para pembaca selalu berkunjung dari satu artikel ke artikel yang lainnya. Related post pun beragam macam jenis dan bentuknya. Ada yang otomatis di tengah, diawal, atau diakhir artikel. Tapi pada kali ini saya akan membahas hal yang berbeda. Yaitu multi related post diantara paragraf artikel.

Memasang Multi Related Post Syugul Najeh

Multi related post ini akan muncul secara otomatis diantara paragraf artikel kamu. Related ini akan menyesuaikan jumlahnya tergantung dengan panjang dan pendeknya artikel yang kamu buat. Misalkan artikel kamu panjangnya 40 paragraf, maka si related post ini akan menyesuaikan letak dan jumlahnya.

Kenapa harus memasang multi related post ini untuk blog? Dan apa keuntungannya?

Multi related post ini udah sangat jelas sangat berguna. Selain dari sisi meningkatkan trafik dan jumlah klik untuk setiap artikel, related ini juga mempengaruhi skor SEO pada blog kamu. Selain itu, related post ini juga akan memperbanyak visitor blog karena banyaknya jumlah internal link tersebut.

Okeh, itulah beberapa keuntungan dan kelebihan dalam memasang multi related post untuk blog. Kalau kamu tertarik untuk memasangnya kamu bisa ikuti saja langkah-langkah dibawah ini.

Cara Memasang Multi Related Post Diantara Paragraf Artikel Blog

1. Masuk ke Dashbord blogger masing-masing.

2. Masuk ke menu Theme => Edit HTML.

3. Kemudian copy dan pastekan kode CSS dibawah ini tepat diatas tag </head>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Multi Related Post */
.arldzgnMultiRelated{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}
.arldzgnMultiRelated:hover{background-color:#222}
.arldzgnMultiRelated .content{padding:12px 15px}
.arldzgnMultiRelated .content .text{margin-right:5px}
.arldzgnMultiRelated .content a{color:#fff;text-decoration:none;line-height:1.5em}
.arldzgnMultiRelated .content a:hover{text-decoration:underline}
.arldzgnMultiRelated .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>

4. Lalu cari kode atau kode <data:post.body/> dan letakan diatas kode tersebut.

Untuk kode <data:post.body/> mungkin berbeda-beda, tergantung template yang digunakan.Ada yang berada di 3 tempat dan ada yang 2. Kamu coba saja satu pertasu hingga muncul multi related postnya.

<b:if cond='data:view.isPost'>
<script type='text/javascript'>
//<![CDATA[
// Multi Related Post
(function() {var jumlah = 3;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'] = 'arldzgnMultiRelated';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 arldzgnMultiRelated() {var text = 'Also read :';let r = Math['floor']((relatedTitles['length'] - 1) * Math['random']());let i = 0;let jumlah = document['querySelectorAll']('.arldzgnMultiRelated');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>

Kamu bisa ganti jumlah related post yang akan muncul diartikel kamu dengan mengganti teks yang ditandai garis dan tebal. (var jumlah='3')

5. Langkah terakhir simpan temanya dan lihat hasilnya.

Itulah cara memasang multi related post yang bisa saya berikan. Kalau masih ada keluhan atau masalah saat memasang kodenya, kamu bisa tanyakan dikolom komentar.

Baca Juga Related Post Otomatis diblog disertai dengan Thumbnail gambar