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 تعليقات

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

    ردحذف
  2. @Ryan Mika Sama-sama..
    Salam kenal kembali..
    Semoga bermanfaat..

    ردحذف
  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!

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

    ردحذف
  5. informasi yang sangat bermanfaat sobat :)

    ردحذف
  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!

    ردحذف
  7. mas, cara bikin komentar bertingkat seperti blog ini gimana ya? mohon infonya, balas di blog saya ya....
    makasih

    ردحذف
  8. wah ini yang ane cari gan, makasih banyak triknya

    ردحذف
  9. @Blogabuabu Itu tinggal dikurangin ada width sidebar wrappernya, trus besaran lebar pengurangannya ditambahin ke width main wrappernya

    ردحذف
  10. @ahmad kali akbar Coba mampir ke sini Gan, http://klikmunadi.blogspot.com/2012/03/komentar-bertingkat-dengan-warna.html

    ردحذف
  11. Kunjungan sore.... Mantap gan

    ردحذف
  12. 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.. ^_^

    ردحذف
  13. Singgah sebentar di mari-cari artikel meanarik..hehehehe

    ردحذف
  14. Secepatnya akan di praktekkan sob,,,thanks!

    ردحذف
  15. wah mantep nieh gan, saya dah terapi di blog saya.
    btw mau tuker link gak?

    ردحذف
  16. @Kang Hilman Terima kasih banyak ya kang..
    Ane segera berkunjung balik nih..

    ردحذف
  17. 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...

    ردحذف
  18. @Blog simple Ane udah pasang link ma follow gan..

    ردحذف
  19. nah yang sperti ini nih yg ane cari gan. mantapz dah. trims..

    ردحذف
  20. 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.

    ردحذف
  21. good tips, sangat bermanfaat. makasih banyak

    ردحذف

إرسال تعليق

أحدث أقدم