Cara Membuat Breadcrumb Navigasi di Blog



[imagetag]
Breadcrumbs adalah sebuah petunjuk atau navigasi yang menginformasikan keberadaan posisi postingan yang aktif. Breadcrumb biasanya membentuk posisi horizontal yang terletak dibawah judul posting. Breadcrumb dapat berupa susunan link yang menghubungkan sebuah posting sesuai dengan beberapa kategori dalam posting tersebut. Breadcrumbs juga membantu pengunjung untuk menelusuri jalur yang telah dilaluinya sampai berada di posisi saat ini sehingga penggunjung dengan mudah dapat kembali ke halaman sebelumnya. Pada kesempatan ini saya akan memberikan trik kepada sobat blogger cara membuat breadcrumb pada blog. Berikut adalah caranya:

1. Login

ke blogger

2. Masuk ke Rancangan -Edit HTML

3. Centang Expand Widget Template

4. Letakan kode dibawah ini sebelum kode <b:includable csal='main' var='top'>



<b:includable csal='breadcrumbs' var='post'>

<!-Breadcrumb by www.kabar--aneh.blogspot.com -->

<b:if cond='data:blog.pageType ="item"'>

<p csal='breadcrumbs'>

<span csal='post-labels'>

<b:if cond='data:post.labels'>

You are here:

<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> >

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

> <b><data:post.title/></b>

</b:if>

</b:if>

</span>

</p>

</b:if>

<!-End of Breadcrumb -->

</b:includable>

5. Cari kode ini atau sejenisnya: <b:if cond='data:post.dateHeader'>

6. Letakan kode dibawah ini sebelum kode pada langkah 5.

<b:include data='post' name='breadcrumbs'/>7. Tambahkan kode dibawah ini diatas kode ]]></b:skin>

.breadcrumbs {

border-bottom:1px dotted #000;

margin:2em 0 0.5em;

padding:0 0 0.5em;

}9. Simpan template

sobat dan lihat hasilnya

#ad2fcb


Artikel Terkait

What's on Your Mind...