Membuat Navigasi Breadcrumb Pada Postingan Blog

Menu Navigasi Breadcrumb ini merupakan salah satu penunjang SEO dalam sebuah blog. Dilihat dari pengertinya yaitu adalah sebaris link tautan internal pada bagian atas postingan atau dibawah halaman situs web yang memudahkan pengunjung untuk kembali ke bagian sebelumnya atau ke halaman dasar dengan cepat.

Saya yakin sudah banyak blogger yang sudah tidak asing dengan Navigasi Breadcrumb ini. Tapi siapa tahu masih ada yang belum tahu, dan juga bisa sebagai bookmark buat saya agar tidak repot2 mencari kesana kemari untuk membuatnya. jadi untuk para master blog lewati saja postingan ini. Hehehe
Untuk lebih jelasnya sobat bisa melihatnya dibagian atas setelah judul posting. atau perhatikan screenshot dibawah ini:

Demo

Berikut langkah-langkah membuatnya:

1. Masuk Rancangan/Layout
2. Pilih Edit HTML
3. Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
4. Beri tanda centang "Expand Template Widget"
5. Tekan Ctrl+F (untuk mempermudah pencarian) Cari kode berikut:

]]></b:skin>

6. Copy lalu paste-kan kode dibawah ini tepat diatas kode diatas

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

7.Kemudian carilah kode:

<div class='post hentry uncustomized-post-template'>

8. Setelah ketemu, taruhlah kede berikut tepat 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 &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <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> &#187; <data:post.title/> </div> </b:if> </b:if>

9. Bila sudah, jangan lupa untuk Save Template.




Sumber : http://kode-blogger.blogspot.com