Cara Membuat Menu Breadcrumb



Apa fungsinya? menurut saya sekedar mempermudah user untuk mengetahui ia sedang berada dilokasi mana halaman yang sedang ditelusuri. Tapi, menurut pakar SEO, navigasi breadcrumb sangat 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 .,..


Responses

0 Respones to "Cara Membuat Menu Breadcrumb"

Posting Komentar

•Sangat Saya Hormati Jika Anda Meninggalkan Komentar di Blog ini

•Mohon Maaf Blog ini Tidak Terima Komentar yang Mengandung Sara , Spamming , Flamming

•Kritik Dan Saran Dari Pembaca Semoga Bisa Membantu Memajukan Blog Ini

Regards : ~Sofyan_oZ~

 

Statistic Blog's



Free Page Rank Tool
Return to top of page Copyright © 2012 Always-Sharing | Blogspot Tutorial | From Zero To Hero | Template by HackTutors