Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

14
Tgl. 02 September 2012

[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. Diman...

ELTELU - Daftar Artikel Terkait Blog Versi Seluler
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.
ELTELU - Daftar Artikel Terkait Versi Mobile Blog

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.


Katagori: ,
Silakan klik di sini untuk mengeposkan komentar Anda. Jika Anda ingin membaca artikel lain yang terdapat pada blog ini, maka dapat Anda lakukan dengan cara membuka laman daftar isi. Catatan: Komentar balasan hanya diprioritaskan untuk pertanyaan dan atau pernyataan yang diposkan dengan memakai formulir komentar Blogger.
Admin
Terdapat 14 komentar pada artikel ini ▶
02/09/12 13.53 O

terimakasih sobat saya sudah berhasil.. lalu cara menambahkan bingkainya bagaimana caranya

03/09/12 10.38 O

@Ghilank ArjunaUntuk menambahkan bingkai, silakan lakukan kustomisasi (sesuai dengan kreatifitas Sobat) dengan menggunakan kode CSS untuk rangkaian kode yang kedua. :)

03/09/12 20.24 O

Rasanya lama sekali saya tidak berkunjung ke blog sahabat saya ini..
dan wah ranknya fantastis :) bermanfaat sekali ini sob tutorialnya.

04/09/12 01.53 O

@Herman sahWahhh, terimakasih Sob. Rasanya saya juga sudah lama belum berkunjung lagi ke blog Sobat.

Kali lain saya pasti akan menyempatkan waktu untuk mengunjungi blog Sahabat satu per satu.

06/11/12 11.46 O

artikelnya sangat membantu sobat, kunjungi juga blag saya .thanks..
http://smbjagasatru.blogspot.com/

Anonim
24/12/12 09.55 O

thanks sob tutorialnya, saya mau coba memasangnya..
tapi masih bingung.. bagaimana cara menampilkan artikel terkait dari salah satu label saja?

misalnya dalam satu postingan terdapat label 'Android' dan 'Multimedia', kemudian saya hanya imgin menampilkan artikel terkait dari label 'Android' saja?

ditunggu ya sob solusinya, maaf ya kalau kepanjangan :)

Anonim
24/12/12 09.57 O

thanks sob tutorialnya, saya mau coba memasangnya..
tapi masih bingung.. bagaimana cara menampilkan artikel terkait dari salah satu label saja?

misalnya dalam satu postingan terdapat label 'Android' dan 'Multimedia', kemudian saya hanya imgin menampilkan artikel terkait dari label 'Android' saja?

ditunggu ya sob solusinya, maaf ya kalau kepanjangan :)

24/12/12 22.34 O

@Ijang CahyanaSobat, karena dalam hal pembuatan artikel terkait seperti ini menggunakan metode looping (pengulangan) untuk mengetahui label sebuah artikel, maka bila ingin menjadikannya seperti itu penyusunan script-nya agak sedikit rumit.

Sehingga sebagai solusi paling mudah adalah dengan cara menampilkan sebuah daftar artikel terkait untuk beberapa label sekaligus dalam satu kolom, seperti yang saya uraikan dalam artikel berikut ini:

Cara Membuat Sebuah Daftar Artikel Terkait Otomatis Untuk Beberapa Label Dalam Blog

Semoga dapat membantu.

28/12/12 14.26 O

wah, tutorial anda sangat lengkap tapi juga bisa membingungkan gan,

saya udah folow blog agan di tunggu follow baliknya

31/12/12 03.12 O

sip

01/01/13 15.21 O

@Andy NugrohoTerimakasih Sobat.

08/01/13 16.46 O

Wah, keren om..
mau nyoba tpi masih agak bingung..hehe
nyimak dulu lah..

sambil liat-liat yang laen..

sekalian minta sarannya, buat my blog
http://aan-shared.blogspot.com

10/01/13 03.35 O

@Aan RusmantoAgar tidak bingung, silakan Sobat pelajari terlebih dulu sebelum mencobanya. :)

How To ▶
Education ▶
SEO ▶
Other Internet ▶
Programming ▶
Tutorial ▶
DP & Story ▶
Tips & Trick ▶

o

  • .Ragam Tumbuhan
  • .Unik & Langka
  • .Aneka Buah
  • .Produk Sederhana
  • .Karya Seni
  • .Tempat Wisata
  • .Ragam Kegiatan
  • .Aneka Bunga
  • .Hewan & Serangga
GALERI
KIRIM MASUKAN
E L T E L U
Semar Bingung's Weblog