Cara Membuat Multiple Related Post Dalam Postingan Blog

 Related post juga memiliki kegunaan untuk meningkatkan SEO pada blog karena internal link dari postingan blog sobat sudah otomatis masuk apalagi kalau multi related post tentunya sangat bagus lagi untuk blog sobat.

 Bukan hanya itu related post juga bisa menambah page view atau tampilan laman.Karena ketika pembaca melihat judul artikel yang menarik pada postingan blog sobat, mereka tentu tertarik untuk menklik tautan yang ada direlated post tersebut.

 Tidak seperti blog yang berplatform wordpress, yang tinggal instal plugin maka related post sudah ada dalam postingan blognya, seperti plugin Inline Related Post.Sedangkan diblogger kita harus membuat sendiri related post yang ada diantara postingan blog.

 Bagi sobat yang ingin menerapkan related post dalam postingan blognya,simak baik baik penjelasan saya mengenai cara membuat multiple related post di bawah ini.

1. Pada dashboar blog anda klik Tema » Edit HTML.
2. Cari kode <data:post.body/> gunakan Ctrl+F untuk mempercepat pencarian.selanjutnya letakkan kode dibawah ini tepat dibawah kode <data:post.body/>. jika kode <data:post.body/>nya lebih dari satu pilih yang ada tag kondisional halaman post.

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

Untuk var jumlah = 3 ubah sesuai keinginan sobat
Untuk var text = Baca Juga bisa di ubah sesuai kenginan misalnya jadi Also Read

3. Agar tampilannya lebih menarik.selanjutnya tambahkan kode CSS dibawah ini diatas kode ]]></b:skin> atau </style>.

● Kode CSS Style 1

/* Multiple Related Posts by tamboenman.xyz */
.tamboenmanMultiRelated {background-color:#DAA520; color:#fff; margin:10px 0px; display:-webkit-box;
display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; justify-content:space-between; transition:all .3s ease;}
.tamboenmanMultiRelated:hover {background-color:#C0392B;}
.tamboenmanMultiRelated .content {padding:10px 15px;}
.tamboenmanMultiRelated .content .text {margin-right:10px; text-decoration:uppercase;}
.tamboenmanMultiRelated .content a {color:#fff; text-decoration:none; line-height:1.5em;}
.tamboenmanMultiRelated .icon{height:auto; min-width:50px; background:#FFD700 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;}
.tamboenmanMultiRelated:hover .icon {background-color:#e74c3c;}

Tampilan kode css style 1 diatas akan seperti gambar dibawah

● Kode CSS Style 2

/* Multiple Related Posts by tamboenman.xyz */
.tamboenmanMultiRelated {background-color:#2F4F4F; color:#fff; margin:10px 0px; display:-webkit-box;
display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; justify-content:space-between; transition:all .3s ease;}
.tamboenmanMultiRelated:hover {background-color:#B8860B;}
.tamboenmanMultiRelated .content {padding:10px 15px;}
.tamboenmanMultiRelated .content .text {margin-right:10px; text-decoration:uppercase;}
.tamboenmanMultiRelated .content a {color:#fff; text-decoration:none; line-height:1.5em;}
.tamboenmanMultiRelated .icon{height:auto; min-width:50px; background:#696969 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;}
.tamboenmanMultiRelated:hover .icon {background-color:#DAA520;}

Tampilan kode css style 2 diatas akan seperti contoh gambar dibawah.

● Kode CSS Style 3

/* Multiple Related Posts by tamboenman.xyz */
.tamboenmanMultiRelated {background-color:#C0392B; color:#fff; margin:10px 0px; display:-webkit-box;
display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; justify-content:space-between; transition:all .3s ease;}
.tamboenmanMultiRelated:hover {background-color:#252525;}
.tamboenmanMultiRelated .content {padding:10px 15px;}
.tamboenmanMultiRelated .content .text {margin-right:10px; text-decoration:uppercase;}
.tamboenmanMultiRelated .content a {color:#fff; text-decoration:none; line-height:1.5em;}
.tamboenmanMultiRelated .icon{height:auto; min-width:50px; background:#E74C3C 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;}
.tamboenmanMultiRelated:hover .icon {background-color:#000;}

Tampilan kode css style 3 diatas akan seperti contoh gambar dibawah.

● Kode CSS Style 4

/* Multiple Related Posts by tamboenman.xyz */
.tamboenmanMultiRelated {background-color:#008000; color:#fff; margin:10px 0px; display:-webkit-box;
display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; justify-content:space-between; transition:all .3s ease;}
.tamboenmanMultiRelated:hover {background-color:#F08080;}
.tamboenmanMultiRelated .content {padding:10px 15px;}
.tamboenmanMultiRelated .content .text {margin-right:10px; text-decoration:uppercase;}
.tamboenmanMultiRelated .content a {color:#fff; text-decoration:none; line-height:1.5em;}
.tamboenmanMultiRelated .icon{height:auto; min-width:50px; background:#228B22 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;}
.tamboenmanMultiRelated:hover .icon {background-color:#CD5C5C;}

Tampilan kode css style 4 akan tampak seperti contoh gambar dibawah.

● Kode CSS Style 5

/* Multiple Related Posts by tamboenman.xyz */
.tamboenmanMultiRelated {background-color:#0000CD; color:#fff; margin:10px 0px; display:-webkit-box;
display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; justify-content:space-between; transition:all .3s ease;}
.tamboenmanMultiRelated:hover {background-color:#C71585;}
.tamboenmanMultiRelated .content {padding:10px 15px;}
.tamboenmanMultiRelated .content .text {margin-right:10px; text-decoration:uppercase;}
.tamboenmanMultiRelated .content a {color:#fff; text-decoration:none; line-height:1.5em;}
.tamboenmanMultiRelated .icon{height:auto; min-width:50px; background:#0000FF 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;}
.tamboenmanMultiRelated:hover .icon {background-color:#FF00FF;}

Tampilan kode css style 5 diatas akan seperti contoh gambar dibawah.

 Setelah selesai simpan template blog sobat dan lihat hasilnya.Sekarang blog sobat sudah seperti blog blog yang berplatform wordpress.

 Untuk demo salah satu style multiple related post dalam postingan blog,silahkan klik tombol demo dibawah ini.

 Demikian sobat penjelasan saya dalam cara membuat multiple related post dalam postingan blog,apabila masih ada yang kurang jelas silahkan sampaikan melalui kolom komentar di bawah dan selamat mencoba.