CARA MEMBUAT NAVIGASI BREADCRUMB DI BLOGGER
Bagi yang belum tau breadcrumb, dibawah ini ada gambar breadcrumb yang saya ambil dari posting contoh surat. Gambar akan bercerita lebih banyak:)
Perhatikan struktur Browse >>Home >> Contoh surat yang saya garis hijau, itu yang disebut navigasi breadcrumb. Untuk blog dengan enggine wordpress gak masalah ya, tetapi untuk membuat navigasi breadcrumb di blogspot memang agak sulit. Ok sebelum masuk ke cara membuat navigasi breadcrumb di blogspot perhatikan hasil pencarian google berikut ini
Yups google mengindex posting contoh surat ini dengan menyertakan navigasi breadcrumbnya. Saya memperoeh tutorial cara membuat ara membuat navigasi breadcrumb di blogspot ini dari salah satu blognya kang rohman.
1. Masuk ke blogger anda
2. Klik tab layout
3. Klik tab Edit HTML
4. Jangan lupa back up dulu template blog anda
5. Klik box beside Expand Widget Templateexpand
6. Cari kode ]]></b:skin>
7. Paste kode dibawah ini persis diatas kode ]]></b:skin>
.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}8.Kemudian cari kode berikut
<div class='post hentry uncustomized-post-template'>
9.Paste kode dibawah ini tepat dibawah kode <div class='post hentry uncustomized-post-template'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> »
<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>
</b:if> » <data:post.title/>
</div>
</b:if>
</b:if>
10. Save hasil modifikasi
11. Dan lihat hasilnya di blog anda.
Jika semua kode benar maka anda akan segera mempunyai navigasi breadcrumb . Kunjungin juga posting kami tentang kata mutiara motivasi dan jadwal motogp 2010.
Tags: cara membuat navigasi breadcrumb di blogspot
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> »
<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>
</b:if> » <data:post.title/>
</div>
</b:if>
</b:if>
10. Save hasil modifikasi
11. Dan lihat hasilnya di blog anda.
Jika semua kode benar maka anda akan segera mempunyai navigasi breadcrumb . Kunjungin juga posting kami tentang kata mutiara motivasi dan jadwal motogp 2010.
Tags: cara membuat navigasi breadcrumb di blogspot
Om gus, makasih ilmunya langsung dipake, om boleh ngak kasih masukan karena blog ini termasuk fovorit saya, iklan yang diatas dari kumpulbloger ngabisa di close saya pake broser IE. maaf ya om klo saya lancang.
BalasHapusMaksih, matur nuwun masukanya, sudah saya coba perbaiki, mudah2an tidak mengganggu pembaca setiap blog ini
BalasHapusUntuk cara yang ke-8 di template html blog saya tidak ada mas..bagaimana caranya kalo begitu keadaannya??
BalasHapusterimakasih mas..
dengan segala kerendahan hati dan rasa persaudaraan yang tinggi kami mengundang teman2 semua utk ikutan event yg ada di blog jelita
BalasHapushttp://jelita.blogdetik.com
Alow jelita, mudah2an bisa ikut ya eventnya sukses selalu
BalasHapus@ arip pasti ada cuman kadang2 ada perbedaan kode sedikit klo gak bisa di cari dengan ctrl+f coba cari dengan manual ya, jangan lupa centang eExpand Widget Templatee
BalasHapuslangsung praktek ja
BalasHapusthank's, dah berhasil kucoba..
BalasHapusbengkel-sehat.blogspot.com
m-ict.blogspot.com
dapat masukan nih ..........
BalasHapusthanks sob buat tutorialnya, sangat berguna buat saya yang masih newbie ini.
BalasHapussalam kenal ya.
nice tips brow...
BalasHapusSupardi Punya
mksih atas tips nya mas...
BalasHapussip,,,infox
BalasHapussangat membantu...
makasih yah bang mau ngshare
BalasHapus