Cara Memasang Breadcrumb di Blogspot dengan Mudah

          hai para Blogger,Kembali lagi bersama saya (Ciye elah -.-). Dan kali ini saya akan Posting tentang Cara Memasang Beadcrumb di Blogspot, Apakah Breadcrumb itu?
Menurut Jacob Nielsen, ditinjau dari sisi usability breadcrumb mempunyai beberapa fungsi, yaitu:

• Menunjukkan lokasi atau path dari halaman web yang sekarang sedang dikunjungi, relatif terhadap struktur halaman di atasnya.
• Menyediakan fitur one-click access ke level halaman web di atasnya sekaligus menghindari user tersesat karena terlalu dalam menjelajahi website.

Breadcrumb ini sangat bermanfaat bagi pengunjung tatkala struktur website yang kita bangun memiliki hirarki atau tingkatan.
Macam-macam model yang biasanya dipakai dalam membuat breadcrumb adalah seperti berikut.

1. Horizontal
Model ini yang sudah biasa dipakai para blogger, karena cenderung hemat tempat dan strukturnya lebih mudah dipahami.


2. Vertikal
Model yang ini agak memerlukan space yang lebih banyak tetapi tetap banyak yang menggunakannya.


3. Kombinasi horizontal dan vertikal
Walaupun tidak banyak, memasang breadcrumb dengan kombinasi horizontal dan vertikal juga masih ada.

Terus apakah situs yang menunya tidak banyak perlu menggunakan breadcrumb?
Seperti yang telah ditulis di atas, breadcrumb sangat bermanfaat apabila web/blog yang kita buat mempunyai menu dengan beberapa tingkatan/hirarki. Namun bila web/blog kita hanya sedikit menunya kayaknya breadcrumb kurang begitu bermanfaat.
Jadi perlu atau tidaknya memasang breadcrumb, ya harus disesuaikan dengan kondisi web/blog sobat.


Sudahtaukan bagaimana pentingnya Breadcrumb di Blog anda?

Pengen tau cara memasangnya langsung Ikut langkah di bawah ini...!

1. Login ke blogger degan ID anda.
2. Klik Tata Letak / layout
3. Kemudian klik tab Edit HTML
4. Click Download Full Template and please back up your template first. Untuk menghindari bila sewaktu-waktu ada kesalahan.
5. Beri tanda centang pada kotak kecil di samping tulisan Expand Template Widget.

6. Cari kode ]]></b:skin>
7. Copy lalu paste kode di bawah ini persis di atas kode ]]></b:skin>

.breadcrumbs {
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #e2e7b4;
}
.breadcrumbs a {
text-decoration:none;
color: #000000;
}

8. Silahkan cari kode berikut pada template anda :
<div class='post hentry'>

9. Copy lalu paste kode di bawah ini persis di bawah kode <div class='post hentry'>

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'><a expr:href='data:blog.homepageUrl'>Ganti Dengan Kata Kunci Utama Blog</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 != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>

►Simpan/save dan silahkan lihat hasilnya
*Note : 1.)Kata Berwarna merah ganti dengan yg lain Sebagai Contoh saya gunakan

Boma-internet

2.)Breadcrumb ini akan terlihat sepertigambar di bawah ini

3.)dan Breadcrumb ini tidak akan muncul di Home Blog anda dan akan muncul saat anda membaca penuh artikel anda :D


Style template seperti ini akan menambah seo friendly sebuah template dan semoga akan semakin meningkatkan serp anda dalam search engine.
Terima kasih telah membaca ,jangan lupa baca artikel terkaitnya juga :D