Menu Breadcrumbs dengan Hanya Satu label yang Tampil
Pada template Thesis SEO Blogger yang sedang saya gunakan ini (saat artikel ini ditulis) memang sudah tertanam 'menu breadcrumbs'. Namun, jika artikel atau posting yang mempunyai label lebih dari satu, label yang tampil pada 'menu breadcrumbs' tersebut hanya satu. Tidak semua label yang dimiliki artikel tersebut muncul.

Untuk menyiasati agar artikel yang mempunyai beberapa label dapat tampil label-labelnya pada 'menu breadcrumbs', maka kita perlu mengedit sedikit kode 'menu breadcrumbs' tersebut.

Berikut ini langkah-langkah untuk membuat semua label tampil pada 'menu breadcrumbs' pada template Thesis SEO Blogger.

1. Masuk ke akun Blogger.

2. Klik "Opsi lainnya" kemudian pilih menu "Template".

3. Selanjutnya klik tombol "Cadangkan / Pulihkan" lalu klik tombol "Unduh template lengkap" untuk membuat salinan template. Hal ini berguna untuk memudahkan mengembalikan template ke keadaan semula bila terjadi kesalahan dalam pengeditan.

4. Klik tombol "Edit HTML" lalu klik tombol "Lanjutkan".

5. Beri tanda centang pada "Expand Template Widget".

6. Cari kode seperti di bawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
&#187;Unlabelled
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>

7. Perhatikan kode <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> lalu tambahkan kode &#187; sehingga menjadi <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;

Selanjutnya amati kode:

<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

Kemudian ganti tanda"=" yang pertama dengan "!" dan tukar letak kedua kode tersebut sehingga menjadi seperti di bawah ini:

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> &#187;

8. Setelah kode nomor 6 diedit, maka hasilnya akan menjadi seperti di bawah ini.

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;
<b:loop values='data:posts' var='post'>
<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;'> &#187;
</b:if>
</b:loop>
<b:else/>
&#187;Unlabelled
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>

9. Klik tombol "Simpan template" dan periksa hasilnya pada artikel yang mempunyai lebih dari satu label.

Label-label pada Menu Breadcrumbs
Semua label tampil pada menu breadcrumbs.

32 Comments

  1. Wah... tutorialnya bagus banget... say langsung memasangnya di blog saya... thanks ya.. salam kenal

    ReplyDelete
  2. @Ryan Mika Sama-sama..
    Salam kenal kembali..
    Semoga bermanfaat..

    ReplyDelete
  3. Bagus juga nihh sob, tpi kode y trlalu ramai bisa mmbuat blog makin berat! heheheee...

    ohh ya sob, mw nnya!
    gimana ya cara buat link2 berderet yg ada di bwah header blog sobat ini (home buku tamu top komentator ...).
    maaf sob prtanyaannya aneh, q harup sobat bisa ngerti mksud q...!
    thanks!

    ReplyDelete
  4. @Blogadexme Coba mampir ke sini Sob, budak-maja.blogspot.com/2010/06/cara-membuat-menu-navigasi-di-bawah.html

    ReplyDelete
  5. informasi yang sangat bermanfaat sobat :)

    ReplyDelete
  6. Thanks agan sudah membantu....!
    info yg brmnfaat sobat, ohh ya sob, mw nnya nih bagaimana ya cara memperkecil sidebar blog?
    mohon info sobat!

    thanks ya sob dah pasang link blog ane!

    ReplyDelete
  7. mas, cara bikin komentar bertingkat seperti blog ini gimana ya? mohon infonya, balas di blog saya ya....
    makasih

    ReplyDelete
  8. wah ini yang ane cari gan, makasih banyak triknya

    ReplyDelete
  9. @BlogS of Hariyanto Terima kasih sudah berkunjung Sob

    ReplyDelete
  10. @Indonesian Strong from Home Terima kasih atas kunjungannya Kang..

    ReplyDelete
  11. @Blogabuabu Itu tinggal dikurangin ada width sidebar wrappernya, trus besaran lebar pengurangannya ditambahin ke width main wrappernya

    ReplyDelete
  12. @ahmad kali akbar Coba mampir ke sini Gan, http://klikmunadi.blogspot.com/2012/03/komentar-bertingkat-dengan-warna.html

    ReplyDelete
  13. Kunjungan sore.... Mantap gan

    ReplyDelete
  14. Mantep banget mas,
    blognya tutorialnya makin oke ajah nih, hehe.. :)

    Nice share utk mas munadi, hehe..:)
    udah lama gak berkunjung ke blognya mas munadi nih sayanya, hehe.. :)
    kunjung balik ya mas, hehe.. ^_^

    ReplyDelete
  15. Singgah sebentar di mari-cari artikel meanarik..hehehehe

    ReplyDelete
  16. Secepatnya akan di praktekkan sob,,,thanks!

    ReplyDelete
  17. wah mantep nieh gan, saya dah terapi di blog saya.
    btw mau tuker link gak?

    ReplyDelete
  18. @Kang Hilman Terima kasih banyak ya kang..
    Ane segera berkunjung balik nih..

    ReplyDelete
  19. @Blogadexme Lama juga ga apa-apa Gan..

    ReplyDelete
  20. ok gan punya saya ane buat satu test dulu ntr jd 3 label.
    ngomng2 saya udah pasang gan link dan sdh di follow. ditunggu gan kmbalinya...

    ReplyDelete
  21. @Blog simple Ane udah pasang link ma follow gan..

    ReplyDelete
  22. nah yang sperti ini nih yg ane cari gan. mantapz dah. trims..

    ReplyDelete
  23. Mantap.. ini yg lg di cari gan, makasih izin copas gan, sekalian mampir gan di lapak ane yg baru buka, http://v2computer.blogspot.com/ sekalian linknya ya gan.

    ReplyDelete
  24. good tips, sangat bermanfaat. makasih banyak

    ReplyDelete

Post a Comment

Previous Post Next Post