Cara Membuat Navigasi Breadcrumb

Cara Membuat Navigasi Breadcrumb - Breadcrumb merupakan navigasi yang berfungsi sebagai 'user interface'. Breadcrumb memungkinkan pengunjung untuk tetap dapat mengetahui lokasi halaman artikel dalam sebuah blog atau web yang sedang mereka baca.

Umumnya breadcrumb berbentuk hierarki yang menjelaskan posisi dan keberadaan sebuah artikel didalam blog. Struktur dasar breadcrumb terdiri dari Halaman depan, Label/Kategori dan Isi artikel, serta dipisahkan oleh tanda >> atau tanda >. Struktur sebuah breadcrumb dapat dilihat seperti berikut :

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

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.

Cara membuat breadcrumb

1. Login ke draft.blogger.com
2. Klik Design
3. Klik Edit HTML
4. Klik Expand Widget Templates
5. 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;
   }

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

7. Simpan Template

Label : Optimasi SEO Blogspot

Share on :

Tweet