Cara Membuat Menu Breadcrumbs

Menu Breadcrumbs - Apa itu menu breadcrumbs? Breadcrumbs merupakan bentuk navigasi yang digunakan user interface pada suatu website, disini user/pengunjung dapat melacak lokasi artikel yang mereka cari hanya dengan melihat navigasi tersebut. Breadcrumbs ini juga memungkinkan semua kategori di blog kita menjadi kata kunci suatu artikel yang kita buat berdasar tag/label, sehingga semua artikel saling terkait. Navigasi Breadcrumbs ini juga sangat SEO friendly, dengan adanya navigasi ini di blog/web kita akan cepat terindeks oleh search engine. Berikut Cara pembuatan Menu Navigasi Breadcrumbs.

Cara Pembuatan Menu Navigasi Breadcrumbs

1. Masuk Blogger

2. Pilih Rancangan/Design

3. Pilih EditHTMl lalu Centang "Expand widget Templates"

4. Cari Kode   ]]></b:skin>  Untuk memudahkan pencarian tekan CTRL + F   

5. Letakan code dibawah ini diatas kode ]]></b:skin>

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

6. Selanjutnya Cari kode  <div class='post hentry uncustomized-post-template'>   ATAU   <div class='post hentry> 
7. Setelah ketemu letakkan kode dibawah ini tepat DI ATAS kode Tersebut.

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> Browse &#187; <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 == &quot;true&quot;'> &#187; <a expr:href='data:label.url' rel='tag'><data:label.name/></a> </b:if> &#187; <span><data:post.title/></span> </b:loop> </b:if> </b:loop> </div> </b:if> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <div class='breadcrumbs'> Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/> </div> </b:if> <b:else/> <b:if cond='data:navMessage'> <div class='breadcrumbs'> <data:navMessage/> </div> </b:if> </b:if>

8. S A V E

Itulah point point untuk membuat menu navigasi breadcrumbs, mudah bukan? Silahkan anda terapkan di blog anda biar blog anda cepat terindeks oleh search engine karena ini juga termasuk cara agar blog kita SEO Friendly. Selamat mencoba dan Sukses Selalu !

Terima Kasih