-->

Cara Membuat Navigasi Breadcrumb Blog

Cara Membuat Navigasi Breadcrumb - Breadcrumb merupakan navigasi yang berfungsi sebagai 'user interface'. Breadcrumb memungkinkan pengunjung untuk tetap dapat mengetahui lokasi halaman artikel dalam sebuah blog atau web yang sedang mereka baca.

Umumnya breadcrumb berbentuk hierarki yang menjelaskan posisi dan keberadaan sebuah artikel didalam blog. Struktur dasar breadcrumb terdiri dari Halaman depan, Label/Kategori dan Isi artikel, serta dipisahkan oleh tanda >> atau tanda >. Struktur sebuah breadcrumb dapat dilihat seperti berikut :

Halaman depan >> Label/Kategori >> Isi Artikel. Atau
Halaman depan > Label/Kategori > Isi Artikel

Pada bagian Halaman depan dan Label akan diberi link yang berfungsi sebagai tombol kembali sehingga dapat memudahkan pengunjung untuk memilih Artikel atau Kategori yang lain.

Cara membuat breadcrumb

Login ke draft.blogger.com
Klik Design
Klik Edit HTML
Klik Expand Widget Templates
Copy kode CSS dibawah ini diatas kode ]]></b:skin>

#breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:10px;
line-height: 1.4em;
border-bottom:1px dotted #CCCCCC;
}

Cari Kode <div class='post hentry uncustomized-post-template'> kemudian paste kode dibawah ini diatasnya.

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> Browse &gt; <a expr:href='data:blog.homepageUrl'>Home</a> &gt; <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> &gt; <data:post.title/></div> </b:if> </b:if>

Simpan Template
Sumber : http://kangamphi.blogspot.com/

Cara Membuat Navigasi Breadcrumb Blog