Cara Memasang Related Post (Baca Juga) di Dalam Postingan Blog

Cara memasang artikel terkait (baca Juga) di dalam postingan blog telah dianggap sebagai alternatif terbaik untuk menurunkan score bounce rates blog. Karena cara ini membuat pengunjung terpancing untuk tidak segera meninggalkan blog dengan cara menampilkan artikel yang terkait dengan artikel yang sedang dibaca. Cara ini juga merupakan salah satu tehnik Onpage SEO untuk blog.

Pada dasarnya, membuat baca juga / artikel terkait di tengah postingan ini prinsip kerjanya mirip dengan related posts yang berada dibawah postingan. Masing-masing menampilkan judul yang berkaitan dengan tags / labels yang sesuai dengan postingan blog. Bedanya adalah, related posts dibawah postingan biasanya di lengkapi dengan gambar sedangkan yang dalam postingan, Image tidak dimunculkan dan pada judul diatasnya terdapat tulisan Baca Juga.

Cara Memasang Artikel Terkait di Dalam Postingan

Anda mungkin sudah sering melihat pada blog yang Anda kunjungi, biasanya kode ini di awali dengan tulisan "Baca Juga" dan berisikan 3 sampai 4 judul postingan yang sesuai dengan label yang biasanya dimunculkan pada tempat khusus mirip sebuah kotak (tergantung Jenis CSS yang digunakan). Artikel terkait dalam postingan ini diharapkan mampu mendatangkan klik bagi para pengunjung blog. Olehnya itu, patutlah bagi Anda untuk mempercantik bagian ini agar visitor Anda terpancing untuk klik link judul baca juga di tengah postingan ini. Nah, apakah Anda tertarik untuk memasangnya pada blogger Anda, jika iya, maka silakan ikuti proses penerapannya pada tutorial dibawah.

Cara Membuat Baca Juga (Artikel Terkait Dalam Postingan)

Pada proses cara membuat baca juga ini, saya akan bagikan 3 jenis tampilan kotak / kolom baca juga yang menarik untuk pemasangan artikel terkait ditengah postingan ini.

Sebelumnya silakan Masuk ke menu Theme ➢ Klik tombol Edit HTML ➣ Tambahkan CSS di bawah ini sebelum kode ]]></b:skin> atau </style>

Cara Pasang Related Posts Baca Juga Otomatis ditengah Postingan

Setelah menempatkan CSS tadi, sekarang adalah pemasangan script Baca juga otomatis ini. Tambahkan kode di bawah ini sebelum tag </head>

<b:if cond ='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>
    //<![CDATA[
var dewaBacajuga=new Array,dewaBacajugaNum=0,relatedUrls=new Array;function related_results_labels(e){for(var l=0;l<e.feed.entry.length;l++){var r=e.feed.entry[l];dewaBacajuga[dewaBacajugaNum]=r.title.$t;for(var t=0;t<r.link.length;t++)if("alternate"==r.link[t].rel){relatedUrls[dewaBacajugaNum]=r.link[t].href,dewaBacajugaNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),l=new Array(0),r=0;r<relatedUrls.length;r++)contains(e,relatedUrls[r])||(e.length+=1,e[e.length-1]=relatedUrls[r],l.length+=1,l[l.length-1]=dewaBacajuga[r]);dewaBacajuga=l,relatedUrls=e}function contains(e,l){for(var r=0;r<e.length;r++)if(e[r]==l)return!0;return!1}function printRelatedLabels(){var e=Math.floor((dewaBacajuga.length-1)*Math.random()),l=0;for(document.write("<ul>");l<dewaBacajuga.length&&l<20;)document.write('<li><a href="'+relatedUrls[e]+'">'+dewaBacajuga[e]+"</a></li>"),e<dewaBacajuga.length-1?e++:e=0,l++;document.write("</ul>")}
//]]>
</script> </b:if>

Selanjutnya, cari dan ganti kode <data:post.body/> dengan kode di bawah ini
Kemungkinan akan ada beberapa kode <data:post.body/> dalam template Anda, tergantung template yang digunakan, maka coba saja satu persatu sampai artikel terkait muncul.

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='dewa-bacajuga'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Baca Juga</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>

Untuk menambah jumlah judul yang muncul, silakan ubah nilai max-results=3" sesuai dengan keinginan Anda. Tapi saran saya cukup untuk 3 saja, karena script ini mempengaruhi kecepatan blog. Dan silakan atur CSS sesuai keinginan Anda.

Saatnya untuk melihat hasil dari tutorial diatas. Silakan check tiap postingan di blog Anda. Apakah script baca juga otamatisnya sudah muncul. Jika belum, coba periksa lagi prosesnya dari awal.

Demikian tutorial kali ini tentang Cara Memasang Related Post (baca Juga) di Dalam Postingan Blog, Semoga bisa diterapkan dengan baik diblog Anda.

Sumber : https://www.arlinadzgn.com/2017/01/memasang-artikel-terkait-di-dalam-postingan.html