Cara membuat menu navigasi breadcrumb diblog

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 breadcrumb sangat disukai Search Engine, saya kurang tau alasannya tapi yang jelas banyak manfaatnya.

Contoh navigasi breadcrumb 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

• Tweet
• Share
• Share
• Share
• Share

Kata Bijak Admin MSA

Sesuatu yang hebat tidak dibuat secara instan tapi dibuat dengan usaha, kegigihan, pantang menyerah dan do'a.

Related Post