[UPDATE] Cara Membuat Daftar Artikel Terkait (Related Post) Pada Blog Versi Mobile

“Membuat Daftar Artikel Terkait Pada Template Seluler Blogspot”, inilah artikel yang saya terbitkan pada tanggal 14 Februari 2012. Dimana dengan menggunakan teknik yang terdapat dalam artikel tersebut maka kita dapat menampilkan daftar artikel sesuai dengan kategori atau label tertentu terkait dengan artikel yang saat itu sedang dibuka. Walau sebenarnya teknik yang diuraikan dalam artikel tersebut terbukti dapat diterapkan dalam template versi seluler, akan tetapi ternyata terdapat bug pada script yang digunakan. Sehingga artikel ini merupakan update (pembaruan) dari teknik sebelumnya, guna perbaikan atas bug yang ditemukan.

Jadi begini, bug yang dimaksud di sini adalah terletak pada daftar artikel terkait yang dihasilkan oleh script sebelumnya apabila sebuah artikel ditandai dalam beberapa kategori atau label sekaligus. Sebagai contoh misalnya apabila sebuah artikel saya kategorikan dalam label “Update dan Mobile Blog”, maka dalam daftar artikel terkait yang dihasilkan akan menampilkan label serangkai satu baris dan kemudian juga menampilkan daftar artikel serangkai satu kolom. Sehingga akibatnya pembaca tidak dapat membedakan artikel mana yang termasuk kategori “Update” dan artikel mana yang termasuk kategori “Mobile Blog”.

Dan selanjutnya apabila Anda mencermati script yang digunakan untuk membuat daftar artikel terkait pada artikel yang berjudul “Membuat Daftar Artikel Terkait Pada Template Seluler Blogspot” dengan script yang dipakai dalam artikel yang berjudul “Cara Mengedit Template Untuk Mengubah Tema Tampilan Blog Versi Seluler”, maka Anda akan mendapati bahwa script yang dipakai sangatlah berbeda sehingga model daftar artikel terkait yang dihasilkan pun menjadi berbeda pula.

Apabila script yang digunakan adalah script yang terdapat pada artikel pertama, maka label dan daftar akan ditampilkan serangkai seperti yang telah saya contohkan di atas. Sedangkan apabila script yang digunakan adalah script yang terdapat dalam artikel kedua, maka label dan daftar yang dihasilkan menjadi terpisah seperti yang tampak pada gambar di bawah ini.

Nah, sehingga apabila sebelum ini Anda pernah membuat daftar artikel terkait untuk tampilan versi seluler dengan memakai script yang terdapat pada artikel pertama yaitu artikel yang berjudul “Membuat Daftar Artikel Terkait Pada Template Seluler Blogspot”, maka silakan mengganti script yang digunakan dengan artikel tersebut dengan rangkaian script berikut ini.

<script type='text/javascript'>
//<![CDATA[
function artikelterkini(json) {
var numposts = 5;
  document.write('<ul>');
    for (var i = 0; i < numposts; i++) {
      document.write('<li>');
      var entry = json.feed.entry[i];
      var posttitle = entry.title.$t;
      var posturl;
      if (i == json.feed.entry.length) break;
      for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
          posturl = entry.link[k].href;
          break;
        }
      }
      posttitle = posttitle.link(posturl);
      document.write(posttitle);
      document.write('</li>');
    }
  document.write('</ul>');
}
//]]>
</script>

Keterangan:

Rangkaian kode di atas digunakan sebagai pengganti rangkaian script yang terdapat pada langkah ketiga.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <h4><b>Baca Pula Artikel Terkait:</b></h4>
    <b:loop values='data:post.labels' var='label'>
      <b><data:label.name/></b>
      <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=artikelterkini&amp;orderby=published&quot;' type='text/javascript'/>
      <b:if cond='data:label.isLast != &quot;true&quot;'><br/></b:if>
    </b:loop>
</b:if>

Keterangan:

Rangkaian kode di atas digunakan sebagai pengganti rangkaian script yang terdapat pada langkah kelima.

Namun apabila sebelum ini Anda belum pernah membuat daftar artikel terkait untuk tampilan versi mobile, maka silakan klik di sini untuk melihat dan mempelajari setiap langkah yang harus dilakukan (mulai dari langkah pertama sampai dengan langkah terakhir).

Dan apabila sebelum ini Anda telah menggunakan teknik kustomisasi template untuk tampilan versi seluler seperti yang saya uraikan dalam artikel dengan judul “Cara Mengedit Template Untuk Mengubah Tema Tampilan Blog Versi Seluler”, maka Anda tidak perlu lagi melakukan perubahan pada script yang digunakan karena script di atas sudah disertakan dalam teknik yang diuraikan pada artikel tersebut.

Semoga berguna dan bermanfaat.

Salam.