Cara Membuat Navigasi Breadcrumb

Cara Membuat Navigasi Breadcrumb. Breadcrumb menurut ahli SEO adalah merupakan navigasi yang berfungsi sebagai 'user interface'. Ini cukup membantu SEO,Breadcrumb memungkinkan pengunjung untuk tetap dapat mengetahui lokasi halaman artikel dalam sebuah blog atau web yang sedang dibaca.Breadcrumb biasanya muncul horizontal di bagian atas dari suatu halaman web,biasanya di bawah bar judul atau header

Pada bagian Halaman depan dan Label akan diberi link yang berfungsi sebagai tombol kembali sehingga dapat memudahkan pengunjung untuk memilih Artikel atau Kategori yang lain.Umumnya breadcrumb berbentuk hierarki yang menjelaskan posisi dan keberadaan sebuah artikel didalam blog. Struktur dasar breadcrumb terdiri dari Halaman depan, Label atau Kategori dan Isi artikel,serta dipisahkan oleh tanda >> atau tanda >. Bagan Breadcrumb yang khas terlihat seperti dibawah ini:

Home page> Halaman Bagian> Ayat halaman

atau

Home page: Bagian halaman: Halaman Ayat
Halaman depan >> Label/Kategori >> Isi Artikel. Atau
Halaman depan > Label/Kategori > Isi Artikel

Cara membuat breadcrumb

Login ke draft.blogger.com
Klik Design
Klik Edit HTML
Klik Expand Widget Templates
Copy kode CSS dibawah ini 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;
}

Cari Kode <div class='post hentry uncustomized-post-template'> kemudian paste kode dibawah ini 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 &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>

Simpan Template dan nimati hasilnya.