Fajar Herianto

Ini dia cara mudah membuat navigasi breadcrumb Di Blogger


Ini dia cara mudah membuat navigasi breadcrumb Di Blogger

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

Posting Komentar

Fajar Herianto

{facebook#https://www.facebook.com/fajarcintalia} {twitter#https://twitter.com/HeriantoFajar} {google-plus#https://plus.google.com/u/0/118173459679605761698/posts} {youtube#https://www.youtube.com/user/aplikasiterunik} {instagram#https://www.instagram.com/aplikasiterunik/}

Formulir Kontak

Nama

Email *

Pesan *

Diberdayakan oleh Blogger.
Javascript DisablePlease Enable Javascript To See All Widget