Membuat Navigasi Halaman Posting (Breadcrumbs) di Blog

Sahabat sekalian tentu ingin sekali memiliki blog yang user friendly, enak dipandang, dan membuat pengunjung blog merasa betah di blog kita. Banyak cara untuk membuat pengunjung blog kita merasa betah. Misalnya, menyuguhkan postingan-postingan yang menarik hingga navigasi mudah terlihat yang mengarahkan pengunjung untuk menjelajahi blog kita. Dengan membuat Breadcrumbs pada setiap postingan blog kita, ini akan membantu pengunjung blog dengan memberitahukan posisi dimana postingan kita dan pengunjung tersebut sedang berada pada kategori posting yang mana.

Langkah untuk membuat Breadcrumbs seperti gambar di atas sangat mudah. Saya menemukan cara ini di blog Kang Rohman :). Bagi dunia blogger di Indonesia tentu sudah tidak asing lagi dengan nama Kang Rohman :)

Yak, berikut ini merupakan cara membuat Breadcrumbs :

1. Pertama, silahkan sahabat mencari kode ]]></b:skin> ini, pada halaman edit html blog sahabat.
2. Setelah ketemu, sahabat copy paste CSS berikut ini :

/* Breadcrumbs */
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

3. Setelah itu, sahabat silahkan cari kode HTML ini, <div class='post hentry uncustomized-post-template'>.
4. Jika sudah ketemu, silahkan pasangkan kode berikut ini tepat di atas kode <div class='post hentry uncustomized-post-template'> untuk membuat Breadcrumbs.

<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'>Beranda</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> 

5. Simpan Kode HTML blogger sahabat, dan lihat hasilnya dengan membuka alamat blog sahabat.

Nah, dari kode tersebut bisa bara jelaskan sedikit. Pertama kita melakukan pengecekkan apakah sedang berada di halaman utama dari blog, jika iya, maka tidak akan melakukan looping dari label yang akan dibuatkan Breadcrumbs. Kemudian, jika tidak (<b:else/>), maka lakukan Breadcrumbs dimana sebelumnya di cek apakah posting memiliki label atau tidak. Jika ternyata berlabel, maka akan dilakukan looping Breadcrumbs. Semoga penjelasan ini cukup membantu sahabat :). Ditunggu saran dan kritik membangun untuk Barayuda.Web.id. Terima Kasih :)