Cara Memasang Breadcrumb Di Blog

 

Breadcrumb dalam istilahnya adalah navigasi web yang difungsikan untuk mengetahui posisi pengunjung ketika menjelajah.
Dalam hal lain, breadcrumb disebut juga dengan istilah Navigasi Path jika anda biasa bekerja dalam File Explorer.
Untuk pemasangan di blogger umumnya navigasi ini diletakkan di atas judul posting. Dan dengan Breadcrumb ini pengunjung akan ditunjukkan posisinya dimana sekarang berada.
Seperti yang ditampilkan gambar di bawah.

Memulai memasang breadcrumb
Penerapan di blogger sangatlah mudah, hanya dengan memanfaatkan 'itemscope' dari http://data-vocabulary.org/

Masuklah ke menu Template dan pilih edit HTML (jangan lupa copy dulu)
Kemudian cari

<b:if cond='data:post.title'>

Setelah ketemu, sisipkan kode ini di bawahnya:

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> <span itemscope='http://data-vocabulary.org/Breadcrumb' itemtype='http://data-vocabulary.org/Breadcrumb'> <a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a> &#8250; </span><span itemscope='http://data-vocabulary.org/Breadcrumb' itemtype='http://data-vocabulary.org/Breadcrumb'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a> <b:if cond='data:label.isLast != &quot;true&quot;'> &#8250; </b:if> </b:loop> </b:if> &#8250; </span><span itemscope='http://data-vocabulary.org/Breadcrumb' itemtype='http://data-vocabulary.org/Breadcrumb'><span itemprop='title'><data:post.title/> </span></span></div> </b:if></b:if>

Lalu cari kode ini untuk menyisipkan kode CSS

]]></b:skin>

Setelah ketemu sisipkan kode CSS ini di atasnya:

.breadcrumbs{
padding:5px 5px 5px 0px;
margin: 15px 0px 15px 0px;
font-size:15px;
line-height: 1.4em;
border-top:1px solid #ffa600;
border-bottom:1px solid #ffa600;
}

*Ubah code CSS sesuai keinginan..

Setelah selesai, simpan template dan lihat hasilnya dengan meng-klik salah satu postingan sobat.