Tips Cara Membuat Navigasi Breadcumb Di Blogger

Alhamdulillah berkat utak atik kode HTML yg saya  temukan di Tutorial blog ahirnya saya bisa menerapkan apa itu breadcumb,terima kasih para blogger yg sudah memposting artikel tsb,tapi banyak juga Navigasi breadcumb tersebut yg tidak suport dengan template nya.
Tips Cara Membuat Navigasi Breadcumb Di Blogger yang saya terapkan di blog saya sendiri barang kali cocok dengan template anda..:
Breadcrumb merupakan salah satu plugin milik Wordpress yang berfungsi untuk memudahkan pembaca dalam menelusuri halaman blog. Jadi ibarat peta atau sitemap dalam blog.

Plugin ini biasanya diletakkan diatas halaman posting. Contoh tampilannya seperti ini:

 Selain dapat memudahkan pembaca dalam mengetahui lokasi halaman yang sedang ditelusuri, plugin ini juga dapat mengoptimasi halaman blog di search engine (SEO). Bahkan dianjurkan langsung oleh Google lho. Tidak percaya? Berikut adalah kutipan yang saya ambil dari ebook 'Google Search Engine Optimization Starter Guide'

Ingin mengetahui lebih banyak teknik-teknik SEO dalam ebook Google Search Engine Optimization Starter Guide? Silahkan baca disini.
Oke langsung aja gan ke intinya.

Pertama Buka halaman Blogger lalu masuk ke menu Design -> Edit HTML
2. Beri centang pada 'Expand Widget Templates'. jangan lupa Download lengkap template nya dulu. 
3. Setelah itu, cari kode <b:if cond='data:post.title'>
4. Letakkan kode berikut dibawah <b:if cond='data:post.title'> 
 

<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumb'>
<a expr:href='data:blog.homepageUrl' rel='tag'>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 != "true"'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>

5. Selanjutnya cari kode ]]></b:skin>

6. Letakkan kode css berikut diatasnya tepat di atas nya.

.breadcrumb {
padding:5px 5px 5px 0px;
margin: 0px 0px 10px 0px;
font-size:90%;
line-height: 1.2em;
border-bottom:3px double #e6e4e3;
}

7. Jika sudah simpan template anda dan lihat hasilnya.
Semoga bermanfaat :)

Sumber : HB