Cara Menampilkan "Artikel Terkait" atau "Related Posts' (Versi I)

Membuat ‘Artikel Terkait’ atau ‘Related Posts’ bisa dilakukan dengan beragam cara, namun intinya sama, yaitu menampilkan bagian judul posting terkait dan ditampilkan berdasarkan penamaan label (kategori). ‘Related Posts’ bisa disebut pula "link yang bekaitan", "artikel pada kategori yang sama", "artikel yang bertautan", "postingan terkait", dll.  Related Posts ini biasanya berupa link yang tampilkan dibawah posting-an tunggal tepatnya di atas kolom komentar.

Keuntungan dengan pemasangan ‘Related Posts’ untuk mempermudah pengunjung blog dalam menemukan artikel yang berkaitan tanpa harus menuju dan membuka satu persatu halaman dalam link label atau menu. Masih bingung dengan penjelasan-penjelasan tadi?? ;-) Mari kita lihat contoh 'Related Posts' berikut ini:

Sudah mengerti kan, apa yang dimaksud? OK! Kalo gitu kita langsung ke proses pemasangannya.

Langkah I:

Masuk pada Rancangan -> Edit HTML -> kemudian cari kode </head>, kemudian letakkan script di bawah ini di atas kode </head> yang tadi anda temukan (jangan lupa Save Template/Simpan Template) :

<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 < 20) {
  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>

Langkah II:

Masuk pada Rancangan -> Edit HTML. Jangan lupa beri tanda centang pada Expand Template Widget, lalu cari kode di  bawah ini :

     <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <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 != "true"'>,</b:if>
          </b:loop>
        </b:if>

Jika sudah ketemu, masukkan kode berwarna merah di bawah, di antara kode tadi. Begini caranya :

     <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <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 != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if>
          </b:loop>
        </b:if>

Pada proses ini pengeditan pada kode HTML sudah selesai, jangan lupa disimpan (Save Template/Simpan Template).

Langkah III:

Masuk pada Rancangan -> Elemen Laman. Kemudian buat elemen baru dengan klik "Tambah Gadget", salin kode di bawah ini dan jangan lupa memberikan nama judul misalnya: "Artikel Menarik Lainnya:" lalu Simpan.

<script type="text/javascript">
 removeRelatedDuplicates();
 printRelatedLabels();
</script>

Langkah IV:

Agar ‘Related Posts’ tidak tampil pada halaman utama dan hanya tampil pada halaman posting tunggal maka kita perlu penambahan beberapa kode, caranya: masuk pada Rancangan -> Edit HTML, centang pada Expand Template Widget, cari kode di bawah ini (cari sesuai dengan title yang kita masukkan, sebagai contoh, tadi saya memberi nama dengan  Artikel Menarik Lainnya:, jika sudah ditemukan masukkan kedua kode berwarna merah di bawah ini. Berikut caranya:

<b:widget id='HTML13' locked='false' title=' Artikel Menarik Lainnya:' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Catatan: Tulisan ‘HTML13’ jangan dijadikan patokan pencarian, karena setiap elemen blog anda masing-masing mungkin berbeda-beda, cukup cari title saja yang saya beri warna ungu.