Cara Membuat Breadcrumb atau menu navigasi berurutan

apa itu breadcrumb ?
bahasanya emang agak susah diucapkan,
saya mengistilahkannya begini : Membuat menu navigasi berurutan di atas artikel posting, merupakan suatu cara efektif untuk memberikan kemudahan pengunjung blog dalam melihat kategori/label posting suatu blog.

jadi menu breadcrumb ini bekerja jika anda sudah mempunyai /membuat label.
dan menu navigasi breadcrumbs ini akan terlihat diatas artikel anda atau dibawah judul blog anda saat anda
membuka halaman suatu postingan bukan halaman utama blogspot anda.(contoh punya saya ini.)
oke langsung aja ya :

Langkah langkah/Cara Membuat Breadcrumb Pada Blogger

1. pergi ke Dashboard,lalu pilih Tata Letak dan kemudian pilih Edit HTML, jangan lupa centang tulisan     Expand Widget Templates.

2. Selanjutnya cari kode berikut (gunakan Ctrl+F pada keyboard anda untuk membantu pencarian):<b:includable id='main' var='top'>

3. Setelah ketemu,letakkan breadcrumb script berikut tepat diatasnya.

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

<!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.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>

4. Cari kode ]]></b:skin>,
jika sudah ketemu letakkan barisan kode css breadcrumb dibawah ini tepat diatasnya.

.breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}

5. Kemudian,cari lagi kode berikut:
     <b:if cond='data:post.dateHeader'>

6. Jika sudah ketemu, letakkan kode dibawah ini tepat diatasnya.
     <b:include data='post' name='breadcrumbs'/>

atau anda bisa sesuaikan dengan blog anda nanti dengan menaruh disekitar kode no 5. (coba deh ber eksperimen)

7. Kemudian Simpan Templates dan Selesai.

anda bisa ganti tulisan Browse (warna merah) sesuai selera anda, misalnya diganti  anda disini atau yang lainnya.

gampangkan

selamat mencoba...
thanks to hoctro

Related Post