Cara Mudah Membuat dan Memasang Breadcrumb di Blog

Cara Membuat dan Memasang Breadcrumb Blog ~ Salah satu fitur navigasi di atas judul postingan yang cukup populer digunakan adalah breadcrumb. Navigasi yang berisi label postingan dimaksudkan untuk menunjukkan dimana posisi pengunjung berada, Sehingga pengunjung akan lebih cepat untuk kembali ke posisi sebelumnya.

Nah, karena itu saya share cara membuat breadcrumb blog yang bisa Anda simak di bawah ini :
  • Login ke Blogger
  • Edit HTML
cari kode ]]></b:skin>  , kemudian copy kode di bawah ini dan letakkan di atasnya
.breadcrumbs {
padding 5px 5px 5px 0;
margin 0; font-size:95%;
line-height:1.4em;
border-bottom:3px double #000000}
  • Kemudian cari kode <div class='post hentry'> 
  • Letakkan kode di bawah ini , setelah kode <div class='post hentry'>

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <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;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>
  • Save Template
Dan sekarang lihat tampilannya dengan membuka salah satu artikel, Apakah sudah ada breadcrumb nya ?
Pada tahap ini, Jika ditemukan ada beberapa kode <div class='post hentry'> di dalam template , Maka lakukan dengan try error ( coba satu persatu ) hingga didapatkan tampilan breadcrumbnya. Saat coba-coba jangan lupa usahakan backup template terlebih dahulu untuk jaga-jaga jika ada yang error bisa dikembalikan lagi ke awal.

Usahakan mencoba kode <div class='post hentry'> yang paling bawah terlebih dahulu, Jangan lupa kembalikan kode ke semula lagi bila belum berubah, Baru dilanjutkan ke kode yang selanjutnya.
Ok , silahkan dicoba cara membuat dan memasang breadcrumb di blog , semoga dapat memberikan manfaat.


EmoticonEmoticon