Cara Memasang Banyak Artikel Terkait Di Blog (Lengkap)

Memasang Multi Related Posts Di Tengah Postingan Blog - Related posts bisa juga disebut dengan istilah Artikel Terkait, dan bahkan beberapa orang menyebutknya dengan Baca Juga. Pada umumnya related posts sering diletakkan di bawah postingan / artikel, tetapi seiring perkembangan banyak yang meletakkannya di tengah postingan blog.

Dan juga kebanyakan memasang satu related posts saja yang berisi beberapa link. Namun disini ShareKu akan membahas tentang cara memasang banyak Related Post, jadi setiap satu related posts berisi satu link saja tetapi akan muncul di setiap paragraf.

Fungsi dan Manfaat Related Posts

Related posts berguna atau berfungsi untuk menampilkan suatu judul artikel yang mengarah ke halaman lain yang memiliki label atau kategori yang sama.

Ini akan bermanfaat bagi pemilik blog serta para pengunjung, karena pengunjung atau visitor akan dapat melihat artikel apa saja yang memiliki kesamaan topik dengan yang mereka baca.

Ini dampaknya visitor akan lebih bisa bertahan lama di blog sobat sehingga Bounce Rate akan turun. Dan juga apabila dari sekian banyak artikel sobat hanya sedikit artikel yang page one di pencarian google atau blog sobat hanya satu atau dua artikel saja yang ramai pengunjung, maka ini akan dapat meningkatkan view untuk artikel / postingan yang sepi pengunjung.

Apabila blog diasumsikan sebagai toko/swalayan maka Related Posts ini bisa berfungsi seperti pramuniaganya, yang akan memberikan informasi kepada calon pembeli bahwa di toko tersebut ada produk sejenis lainnya, sehingga calon pembeli akan tahu bahwa ternyata ada produk lain yang sejenis di toko tersebut.

Cara memasang Multi Related Posts di tengah postingan

Kelebihan dari multi Related Posts ini karena akan muncul di setiap paragraf dan setiap paragraf hanya memunculkan satu baris saja, sehingga akan lebih sering terlihat bagi para pembaca artikel sobat.

Untuk cara memasangnya adalah sebagai berikut:

1. Login ke Blogger dan pilih Theme/Template kemudian Edit HTML
2. Tambahkan kode CSS berikut ini diatas kode </head>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Multi Related Post */
.arldzgnMultiRelated{background-color:#038147;color:#fff;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;transition:all .3s}
.arldzgnMultiRelated:hover{background-color:#000000}
.arldzgnMultiRelated .content{padding:12px 15px}
.arldzgnMultiRelated .content .text{margin-right:5px}
.arldzgnMultiRelated .content a{color:#fff;text-decoration:none;line-height:1.5em}
.arldzgnMultiRelated .icon{height:auto;min-width:55px;background:rgba(255,255,255,.25) 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}
.arldzgnMultiRelated:hover .icon{background-color:rgba(255,255,255,.15)}
</style>
</b:if>

Untuk mengubah warna sesuai selera kamu, bisa diubah bagian code #038147

3. Cari kode <data:post.body/>. Biasanya ada beberapa <data:post.body/> jadi carilah yang ada di dalam tag kondisional. Kemudian Letakkan kode berikut ini di bawah <data:post.body/> 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'] = 'MultiRelated';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 MultiRelated() {var text = 'Baca Juga :';let r = Math['floor']((relatedTitles['length'] - 1) * Math['random']());let i = 0;let jumlah = document['querySelectorAll']('.MultiRelated');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>

Angka 4 warna merah di atas menunjukkan berapa banyak related post yang ditampilkan, jadi bisa kamu ubah sesuai kebutuhan.
Kata Baca Juga bisa diubah dengan selera dan keinginan kamu.

4. Klik Simpan

Disini sobat sudah berhasil membuat multi related posts di dalam postingan sobat.

Agar Related Posts bisa muncul, tentu saja sobat harus memberikan label terlebih dahulu.

Karena ternyata masih ada yang bingung kenapa Related Posts tidak muncul, ternyata penyebabnya belum adanya label di postingan-postingan blognya.

Sekian dari ShareKu, semoga bermanfaat dan jangan bosan-bosan mampir kemari ya. Terima kasih.

Berbagi :