Indonesia BlogProject - Salam blogger!
Halo sobat blogger apa kabarnya?? semoga baik-baik saja amin. Di kesempatan kali ini saya akan share bagaimana caranya membuat Navigasi Breadcrum pada blog. Tapi sebelumnya sobat blogger sudah paham dan mengerti belum apa arti atau pengertian dari Navigasi Breadcrum itu sendiri??
Ok, disini saya juga akan jelaskan terlebih dahulu apa itu Navigasi Breadcrum menurut versi saya.
Navigasi Breadcrum adalah salah satu navigasi menu atau pelacak bagi pengunjung blog untuk memberitahukan pengunjung sedang berada di halaman manakah mereka saat mengunjungi blog sobat ketika itu. Jadi kalau di ibaratkan sebuah rumah, si tamu akan di beritahukan bahwa saat ini dia sedang berada dimana saat itu. Misalkan dia sedang berada di ruang makan, ruang tamu, atau ruang lainnya (misal). Lebih jelasnya silahkan sobat lihat gambar di bawah ini;
Bagaimana sudah mengerti bukan?? pastinya..
Sekarang kita menuju ke langkah bagaimana cara pembuatannya (emang bikin kue).
Step One :
* Silahkan sobat blogger login ke dasbor blog.
* Pilih Design/ Rancangan.
* Lalau pilih Edit HTML.
* Dan jangan lupa centang Expand Template Widget.
Step Two :
* Silahkan sobat blogger cari kode dibawah ini;
]]></b:skin>
* Setelah ketemu, kemudian sobat blogger copy kode dibawah ini, dan tempatkan tepat di atas kode tersebut;
#breadcrumbs {padding:5px 5px 5px 0px;margin: 0px 0px 15px 0px;font-size:10px;line-height: 1.4em;border-bottom:1px dotted #CCCCCC;}
Step Three :
* Kemudian sobat blogger cari lagi kode dibawah ini;
<b:if cond='data:post.title'>Catatan : Biasanya ada lebih dari satu kode, tapi cukup satu kode saja yang di pakai.
* Setelah ketemu kemudian sobat blogger copy kode dibawah ini, dan tempatkan tepat di atas kode tersebut;
<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>Step Four :
* Silahkan sobat blogger save/ simpan template blog sobat, dan lihat hasilnya dengan membuka salah satu postingan artikel di blog Anda.
Selamat mencoba.
0 komentar:
Posting Komentar