Cara Membuat Navigasi Breadcrumb

Cara Membuat Navigasi Breadcrumb - Breadcrumb adalah navigasi yg digunakan  sbg 'user interface' yg memungkinkan pengunjung  dpat mengetahui halaman artikel yang sedang mereka baca.umumnya breadcrumb berbentuk tulisan/link yg menjelaskan posisi dan keberadaan sebuah artikel tetapi ada juga yang berbentuk gambar . komponen breadcrumb biasanya terdiri dari Halaman depan, Label/Kategori dan Isi artikel yang umumnya dipisahkan dengan  tanda >> atau tanda >. Lebih jelasnya seperti tulisan dibawah ini::

Halaman depan >> Label/Kategori >> Isi Artikel.

Bagian Halaman depan dan Label akan dpasang  link yg sebagai tombol kembali supaya  memudahkan pengunjung  blog dalam memilih Artikel yang lain.Cara memasang navigasi ini adalah ;

1.Login ke dasbor  blogger
2.Pilih Design
3.Lalu pilih Edit HTML
4.Dan jangan lupa Expand Widget Templates

Copy CSS dibawah ini diatas/sebelum 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;
}

·         Carilah Kode <b:if cond='data:post.title'> lalu paste/copykan kan kode dibawah ini diatasnya.,lalo ada 2 kode yang sama ambil yang pertama tetapi jika gagal coba dipasang di kode yang kedua ,  tetapi biasanya kode yang pertama akan berhasil.

<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>

·         Terakhir simpanlah  template pada tempatnya ,demikian tutorial cara dari saya semoga dapat membantu anda.