Cara Membuat Related Post Tanpa Thumbnail Keren ala Kode Jarwo
Cara Membuat Related Post Tanpa Thumbnail Keren ala Bang Jarwo

Related Post atau sering disebut post terkait adalah widget yang menampilkan postingan lainnya yang memiliki kesamaan label. Misal postingan A di blog anda berlabelkan SEO, dan postingan B di blog anda juga berlabelkan SEO.

Maka bila anda membuka postingan A, judul dari postingan B juga ikut muncul pada widget ini. Begitu pula sebaliknya.

Tanpa basa-basi lagi, berikut beberapa kelebihan widget related post hanya judul ini:
  1. SEO Friendly, menggunakan tag H6
  2. Tanpa CSS, Pure Javascript dan HTML
  3. Ringan
  4. Dapat menampilkan multi label
  5. Responsif
  6. Tidak menimbulkan masalah loading blog seperti Leverage Browser Caching, dan sebagainya

Sebagai tambahan, related post ini tidak menggunakan thumbnail dan snippet, hanya menampilkan judul dengan warna yang menyesuaikan link di blog anda (misal kalau blog ini biru muda).

Juga Javascript yang saya pakai bukan 100% buatan saya, tetapi saya mendapatkannya dari blog Giribig, dan saya rombak sedikit agar lebih bagus. Jadi bukan 100% ala Bang Jarwo

Langsung saja berikut cara pemasangannya.

  • Pertama, cari kode </head> atau &lt;!--<head/>--&gt; (bila tidak ada </head>) dan masukkan kode ini tepat diatasnya.

<script type='text/javascript'>//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;}}}}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];}}
relatedTitles = tmp2;
relatedUrls = tmp;}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 5) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;}
i++;}
document.write('</ul>');}
//]]></script>

  • Lalu, cari kode </article> dan masukkan kode ini diatasnya

<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=5&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center><h6>Artikel Terkait <b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> - </b:if></b:loop></b:if>
</h6></center>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>

  • Simpan template, dan lihat hasilnya

  1. Anda dapat mengganti angka  dengan jumlah postingan yang ingin anda tampilkan nantinya.
  2. Untuk pemasangan langkah kedua, anda dapat menggantinya dengan menempatkan kode diatas di Tata Letak > Tambahkan Widget > HTML/Javascript.

Bagaimana? Apakah widget dapat bekerja dengan baik di blog anda? Bila anda mengikuti langkah demi langkahnya, widget pasti terpasang dengan sempurna.