Cara Buat Breadcrumbs Pada Blog

Pada postingan sebelumnya Gang Tutorial Siap Tancap Gas..!!! sudah dijelaskan bahwa untuk mengawali postingan setelah lama vakum adalah tips trik blog. Tips dan trik blog kali ini yang akan dibahas adalah Cara Buat Navigasi Breadcrumbs Pada Blog. Breadcrumb merupakan cara efektif untuk memberikan kemudahan pengunjung dalam melihat kategori posting suatu blog.

Dengan menu navigasi breadcrumb, pada blog akan muncul menu tambahan di bagian atas. Menu tersebut akan ditampilkan dengan format Home > [Nama Label] > Judul Posting, seperti contoh pada blog ini.
Selain memudahkan navigasi, breadcrumb juga dipercaya memudahkan search engine untuk mengindeks posting.

Langkah-langkah Buat Breadcrumb Pada Blog

  • Pertama, pastikan sobat sudah membuat label pada blog.
  • Selanjutnnya, pergi ke Dashboard, lalu pilih Design dan kemudian pilih Edit HTML, jangan lupa contreng tulisan Expand Widget Templates.
  • Selanjutnya cari kode berikut (gunakan Ctrl+F pada keyboard sobat untuk membantu pencarian):
<b:includable id='main' var='top'>
  • Setelah ketemu,letakkan breadcrumb script berikut tepat diatasnya.
    <b:includable id='breadcrumbs' var='post'> <!-- Breadcrumbs hack. By gang tutorial http://sandydoank12.blogspot.com --> <b:if cond='data:blog.pageType == "item"'> <p class='breadcrumbs'> <span class='post-labels'> <b:if cond='data:post.labels'> Browse: <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>  &gt; <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast == "true"'> <a expr:href='data:label.url' rel='tag'> <data:label.name/></a> </b:if> </b:loop> <b:if cond='data:post.title'> &gt;  <b><data:post.title/></b> </b:if> </b:if> </span> </p> </b:if> <!-- End of Breadcrums Hack --> </b:includable> 
  • Kemudian,cari lagi kode berikut : <b:if cond='data:post.dateHeader'>
  • Jika sudah ketemu,letakkan kode dibawah ini tepat diatasnya.
    <b:include data='post' name='breadcrumbs'/>
  • Sekarang cari kode ]]></b:skin> jika sudah ketemu letakkan barisan kode css breadcrumb dibawah ini tepat diatasnya..
    .breadcrumbs{ padding:5px 5px 5px 0; margin:0;font-size:95%; line-height:1.4em; border-bottom:4px double #cadaef; } 
  • Kemudian Simpan Templates dan Selesai.

Menu navigasi breadcrumbs ini hanya akan terlihat setelah membuka halaman suatu posting bukan halaman utama blog sobat.

OK sampai disini dulu Cara Buat Breadcrumbs Pada Blog Selamat mencoba dan semoga bermanfaat

9 Comments

  1. sebenarnya fungsi utama dari breadcrumbs apa yaaCh sob ??? maklum nih, masih nubie ... :D

    ReplyDelete
  2. makasih infonya mas, salam sukkses!

    ReplyDelete
  3. maksih mas atastutornya sangat bagus, barusan saya uda pasang. sekali lagi makasih ya..

    ReplyDelete
  4. @Shinobi Caemk fungsinya agar blog lebih seo frienly sob (memudahkan search engine untuk mengindeks posting)

    ReplyDelete
  5. @ rosad : ok seef testingnya
    @ ankus : sama2. sukses balik ya
    @ download : ok sob sama2 telah mampir dan selamat atas suksesnya

    ReplyDelete
  6. This comment has been removed by a blog administrator.

    ReplyDelete
  7. makasih tutorialnya bang saya udah make dan berhasil hehe

    ReplyDelete
  8. Menu ini sangat penting dan sayangnya tidak semua template ada menu ini dan harus pasang secara manual
    Nice share, postingannya sangat membantu..

    ReplyDelete

Mohon diperhatikan
1. No Spam
2. No Link