Cara Membuat Navigasi Breadcrumb Di Blogspot

Kingarif86.blogspot.com - Pada postingan kali ini saya akan menjelaskan tentang Cara Membuat Menu/Navigasi Breadcrumb. Mungkin sobat belum mengenal Breadcrumb atau bahkan sobat sudah mengerti apa yang dimaksud dengan Breadcrumb, hal ini bukanlah menjadi masalah tulisan ini dibuat untuk memberikan informasi kepada siapa saja.

Apa itu Navigasi Breadcrumb?
Menurut kutipan yang saya dapat dari wikipedia.

Tulisan ini menggunakan bahasa inggris yang bertujuan menjaga keaslian tulisan dan kutipan

Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It allows users to keep track of their locations within programs or documents. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale.

Kesimpulan atau dengan kata lain adalah :

Navigasi Breadcrumb adalah kumpulan dari beberapa link yang memunkinkan untuk menumakan link artikel kalian atau disebut juga alamat link artikel pada blog Sobat semua. 

Biar tidak banyak basa-basi silahkan sobat ikuti langkah-langkahnya :

1. Login ke Akun Blogger Sobat

2. Pilih Rancangan, kemudian sobat klik Edit HTML, Jangan lupa sobat cek list Expand Template

3. Back Up Template sobat untuk menghindari kesalahan yang tidak di inginkan

4. Cari code ini ]]></b:skin> dengan menggunakan ctr+F

5. Letakan code ini tepat diatas code tersebut.

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


6. Sobat Cari lagi code <b:include data='top' name='status-message'/> Paste code di bawah ini persis di bawah code <b:include data='top' name='status-message'/> (Jika ada 2, letakkan pada code yang ke 2)
<b:include data='posts' name='breadcrumb'/>

7. Cari lagi kode <b:include data='top' name='status-message'/> Paste kode di bawah ini persis di bawah kode <b:include data='top' name='status-message'/> (Jika ada 2, letakkan pada kode yang ke 2)

Maka hasilnya akan seperti ini :

<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>
<data:adStart/>

8. Gunakan ctr+F untuk mencari code ini

<b:includable id='main' var='top'> lalu sobat tambahkan script atau code dbawah ini tepat diatas code tersebut

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<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:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

9. Sebelum sobat mengklik Save Template sebaiknya sobat Klik Pratinjau terlebih dahulu untuk melhat keberhasilan script atau code yang sudah sobat edit sebelumnya

10. Kemudian Klik Save Template

Jika sobat berhasil silahkan berikan komentar sobat disini. Selamat mencoba !