Cara Membuat Menu/Navigasi Breadcrumb Baru!!

Hallo sobat-sobat sekalian ^_^. Kembali lagi bersama saya AcerNoval, dan pada postingan kali ini saya akan menjelaskan tentang  Cara Membuat Menu/Navigasi Breadcrumb. Apa itu Navigasi Breadcrumb?

Source : AcerNoval's Site

Menurut Wikipedia : 

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.

Source : AcerNoval's Site

Kesimpulannya :

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

Untuk lebih jelasnya lagi, mari kita lihat screen shoot dibawah :

Menarik bukan? Selain itu, Breadcrumbs juga bagus untuk SEO. Karena akan tampil pada Search Engine ketika kita mengetikkan keywords yang dituju.

Jadi tunggu apa lagi, bagi yang belum memasang Breadcrums tidak ada salahnya kan jika kita mencoba ^_^.

Bagi yang tertarik, silahkan ikuti langkah-langkah dibawah ini :

1. Login ke Akun Blogger sobat.

2. Pilih Rancangan => Edit HTML =>> Centang Expand Template Widget

3. Backup template sobat terlebih dahulu, untuk berjaga-jaga jika terjadi kesalahan. 

4. Cari kode ]]></b:skin> , dan letakkan kode berikut tepat diatasnya :

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

5. 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)

Source : AcerNoval's Site

<b:include data='posts' name='breadcrumb'/>

Maka akan terlihat seperti ini :

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

<b:include data='posts' name='breadcrumb'/> 

<data:adStart/>

7. Cari (Ctrl+F) <b:includable id='main' var='top'> lalu tambahkan script berikut tepat diatas kode 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>

8. Pratinjau terlebih dahulu, jika tidak terjadi galat klik Simpan Template.

Walaupun cukup rumit, tapi saya yakin, Sobat dapat melakukannya ^.^

Sekian dulu postingan dari AcerNoval. Semoga bermanfaat yaa :D.  Mohon maaf bila ada kata-kata yang salah, karena kita seorang blogger yang sama-sama sedang belajar, saling bertukar ilmu, dan saling menjaga silaturahmi antar blogger. Jika ada pertanyaan jangan dipendem dihati kalian, silahkan isi Form komentar ya ! Salam sukses selalu, Salam Blogger ...