Cara Membuat Navigasi Breadcrumb

Cara  Membuat Navigasi Breadcrumb.
Tumbennya sarapan pagi tadi terhidangkan roti. Padahal perut ini tak suport roti,maklum sob perut kampung,hehe. Toh biasanya kalo sarapan pagi ane nyabu,atau kalo menurut bahasanya Alam,penyanyi dangdut kelahiran Tasikmalaya, Sabu singkatan dari sarapan bubur.

Lalu apa hubungannya sarapan pagi dengan breadcrumb? Jelas ini ga' ada hubungan apa-apa karena breadcrumb yang akan kita buat ini erat kaitannya hanya dengan blog kita.Breadcrumb memungkinkan pengunjung untuk tetap dapat mengetahui lokasi halaman artikel dalam sebuah blog atau web yang sedang kita baca.Tapi katanya sieh kalau dengan SEO, breadscrumb ini terkait dan diperlukan,tapi entahlah karena kebanyakan SEO hanyalah sebuah artikel.

Remah roti atau breadcrumb menurut bahasan WikiPedia adalah bantuan navigasi yang digunakan dalam user interface. Hal ini memungkinkan pengguna untuk melacak lokasi mereka dalam program atau dokumen. Istilah ini berasal dari jejak remah roti yang ditinggalkan oleh Hansel dan Gretel dalam dongeng populer. Breadcrumb biasanya muncul horizontal di bagian atas dari suatu halaman web, biasanya di bawah bar judul atau header. Breadcrumb menyediakan link kembali ke halaman sebelumnya atau kembali ke titik awal entri didalam sebuah blog. Struktur dasar breadcrumb terdiri dari Halaman depan, Label/Kategori atau Halaman Bagian dan Isi artikel atau Ayat Halaman, biasanya dipisahkan oleh tanda >> atau tanda > sobat bisa liahat contohnya di blog ini,atau screenshot gambar profil postingan ini.Struktur sebuah breadcrumb dapat dilihat seperti berikut :

Breadcrumbs yang khas akan terlihat seperti ini:
Home page> Halaman Bagian> Ayat halaman
atau
Home page: Bagian halaman: Halaman Ayat

      Cara membuat breadcrumb:

      Login ke ke Akun blogger sobat

      Klik Design

      Klik Edit HTML

      Klik Expand Widget Templates

      Copy kode CSS dibawah ini dan pastekan diatas kode ]]></b:skin>

#breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:10px;
line-height: 1.4em;
border-bottom:1px dotted #CCCCCC;
}

Lalu cari kode ini

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

Kemudian pastekan kode dibawah ini diatasnya kode tadi.

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> Browse &gt; <a expr:href='data:blog.homepageUrl'>Home</a> &gt; <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> &gt; <data:post.title/></div> </b:if> </b:if>

Kemudian klik Simpan Template.

Semoga bermanfaat dan berhasil di terapkan,happy blogging.