Ini dia cara mudah membuat navigasi breadcrumb

Membuat navigasi breadcrumb sangat mudah, hanya saja jika kita tahu script dan langkah-langkah membuatnya.

Apa fungsinya? menurut saya sekedar mempermudah user untuk mengetahui ia sedang berada dilokasi mana halaman yang sedang ditelusuri. Tapi, menurut pakar SEO, navigasi breadcrumbsangat disukai Search Engine, saya kurang tau alasannya tapi yang jelas banyak manfaatnya.

Contoh navigasi breadcrum seperti berikut :

Home >> label >> judul posting / artikel

Ini dia cara mudah membuat navigasi breadcrum :

1. Login ke blog >> rancangan >> Edit HTML

2. beri centang 'expand widget templates'

3. lalu cari kode <b:if cond='data:post.title'> (CTRL+F cara cepat mencari kode) Jika ada dua kodenya pilih yang pertama.

4. Kemudian copy kode dibawah letakkan dibawah <b:if cond='data:post.title'> tadi.

<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumb'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;
<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 != "true"'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>

5. kalau sudah cari lagi kode ]]></b:skin>

6. copy kode CSS berikut ini letakkan di atas kode ]]></b:skin> tadi

.breadcrumb {
padding:5px 5px 5px 0px;
margin: 0px 0px 10px 0px;
font-size:90%;
line-height: 1.2em;
border-bottom:3px double #e6e4e3;
}

7. jika sudah SAVE template sobat , lihat hasilnya

Selesai, kalau berhasil like ya? 

sumber: masterendi.com

Artikel Terkait:

Posted in: Tips Trik Blog