Cara Membuat Artikel Terkait "Baca Juga" Seperti Wordpress di Blog

Jagoandzgn.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana Cara Membuat Artikel Terkait "Baca Juga" Seperti Wordpress di Blog, dalam membuat artikel terkait atau biasanya kita sering melihatnya yaitu baca juga memang bisa dianggap sebagai cara terbaik untuk menurunkan score bouce rate di blog kamu. Dengan adanya artikel terkait ini kita sengaja membuat pengunjung dipancing untuk segera meninggalkan artikel tersebut dengan cara menampilkan artikel yang terkait dengan yang sedang mereka baca.

Artikel yang satu ini dibagiakan dengan bentuk yang berbeda dari artikel terkait yang pernah kamu lihat sebelumnya, dikarenakan setiap terkait akan muncul satu per satu di bagian paragraf tertentu dan kamu bisa mengaturnya sesuai keinginanmu.

Cara Membuat Artikel Terkait "Baca Juga" Seperti Wordpress di Blog

1. Silahkan kamu login ke blogger.com dengan menggunakan akun Gmail kamu.

2. Masuk ke menu TEMA > klik Edit HTML

3. Selanjutnya, cari kode berikut ini ]]></b:skin> dan pastekan kode dibawah ini tepat DIATAS kode tersebut.

/* Exploit Related Post */
.exploitMultiRelated{border-left:5px solid #1a73e8;background-color: rgba(255,255,255,0.1);color:#000;margin:10px 15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;transition:all .3s} .exploitMultiRelated:hover{background-color:#e3e3e3}
.exploitMultiRelated .content{padding:10px 10px;line-height:1.5em} 
.exploitMultiRelated .content .text{margin-right:5px;font-weight:600;} 
.exploitMultiRelated .content a{color:#000;text-decoration:none;line-height:1.5em} 
.exploitMultiRelated .icon{ height:auto; min-width:50px; background:#1a73e8 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%23fff'/%3E%3C/svg%3E") center / 40px no-repeat; transition:all .3s ease;}
.exploitMultiRelated:hover .icon{background-color:#1a73e8;}

4. Kalau sudah silahkan kamu cari kode berikut ini <data:post.body/> { Biasanya kode tersebutnya ada 3 pastekan tepat dibawah kode terakhir tersebut } pastekan tepat DIBAWAH ke-3 kode tersebut.

<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'] = 'exploitMultiRelated';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 exploitMultiRelated() {var text = 'Baca Juga :';let r = Math['floor']((relatedTitles['length'] - 1) * Math['random']());let i = 0;let jumlah = document['querySelectorAll']('.exploitMultiRelated');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. Langkah selanjutnya adalah dengan menghapus widget artikel terkait bawaan templat, untuk kamu pengguna Viomagz silahkan kamu cari kode dibawah ini dan ubah dari TRUE menjadi FALSE.

var widgetBacaJuga = true;

6. Kalau sudah silahkan klik SIMPAN dan Selesai.

Demo

Bagaimana mudah bukan untuk tutorial Cara Membuat Artikel Terkait "Baca Juga" Seperti Wordpress di Blog, untuk melihat demonya silahkan kamu klik tombol demo diatas dan apabila kamu memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah artikel ini.