Sebelum kita masuk ke bahasan cara pasang Breadcrumb di Blogspot Blogger, ada baiknya terlebih dahulu mengetahui apakah Breadcrumb dan manfaatnya jika di pasang pada website atau blog. Oleh karena di posting ini saya sertakan juga mengenai itu.
Apakah Breadcrumb (Breadcrumbs)? Breadcrumb adalah merupakan keterangan yang di buat oleh blogger dan webmaster sebagai navigasi untuk membantu pembaca atau pengunjung situs mereka, yakni mengenai lokasi dimana si pengunjung berada menurut urutan link yang dibungkus dalam teks.
Jikalau mereka sedang membuka sebuah halaman website atau juga sedang membaca sebuah artikel maka peranan Breadcrumbs memberitahukan posisi halaman atau artikel tersebut berada secara berseri.
Semisal anda sedang membaca artikel ini, maka di atas judul artikel anda dapati urutan navigasi breadcrumb seperti pada gambar berikut ini:
Breadcrumbs tersebut menjelaskan bahwa anda sedang membaca artikel ini dan artikel tersebut berada pada kategori Blogspot dan Tips Ngeblog. Sehingga memberi keterangan tambahan dimana posisi mereka tepatnya berada di dalam website atau blog anda.
Untuk urusan desain web atau blog maka memiliki sebuah Breadcrumb menunjukkan bahwa anda telah berusaha membuat website milik anda tertata rapi dan pintar, efeknya membantu pembaca saat mengembara di dalamnya dan berinteraksi dengan seluruh konten yang anda sajikan.
Selain itu umumnya mesin pencari merekomendasikan navigasi pintar ini, seperti Google contohnya. Ia termasuk pelopor yang merekomendasikan agar para blogger dan webmaster memiliki navigasi breadcrumb di website miliknya:
Jadi memiliki sebuah lintasan breadcrumb maka website atau blog anda telah mengikuti aturan yang di rekomendasikan disiplin ilmu desain web / blog dan juga SEO (untuk SEO masih dalam perdebatan, namun karena Google rekomendasikan navigasi ini maka ia termasuk SEO).
Baiklah setelah penjelasan singkat mengenai apa itu dan manfaat Breadcrumb, kini giliran memasang lintasan navigasi ini di Blogspot milik anda, untuk membantu pembaca dan pengunjung saat berpetualang di blog milik anda:
1. Log-in ke Blogger.com gunakan akun anda.
2. Kemudian menuju Rancangan lalu Edit HTML jika anda masih gunakan tampilan lama dashboard Blogspot maka klik Expand Template Widget. Lalu masukan CSS Breadcrumb berikut ini:
Letakan kode CSS diatas sebelum tag ini: ]]></b:skin>.
3. Kemudian anda cari tag berikut ini:
4. Setelah ketemu maka masukan kode tag Breadcrumb berikut ini di atas kode sebelumnya:
5. Kemudian klik tombol Simpan Template atau Save Template anda.
Selamat! Karena kamu telah memiliki navigasi Breadcrumb di blog Blospot kamu.
Apakah Breadcrumb (Breadcrumbs)? Breadcrumb adalah merupakan keterangan yang di buat oleh blogger dan webmaster sebagai navigasi untuk membantu pembaca atau pengunjung situs mereka, yakni mengenai lokasi dimana si pengunjung berada menurut urutan link yang dibungkus dalam teks.
Jikalau mereka sedang membuka sebuah halaman website atau juga sedang membaca sebuah artikel maka peranan Breadcrumbs memberitahukan posisi halaman atau artikel tersebut berada secara berseri.
Semisal anda sedang membaca artikel ini, maka di atas judul artikel anda dapati urutan navigasi breadcrumb seperti pada gambar berikut ini:
Untuk urusan desain web atau blog maka memiliki sebuah Breadcrumb menunjukkan bahwa anda telah berusaha membuat website milik anda tertata rapi dan pintar, efeknya membantu pembaca saat mengembara di dalamnya dan berinteraksi dengan seluruh konten yang anda sajikan.
Selain itu umumnya mesin pencari merekomendasikan navigasi pintar ini, seperti Google contohnya. Ia termasuk pelopor yang merekomendasikan agar para blogger dan webmaster memiliki navigasi breadcrumb di website miliknya:
"A breadcrumb trail is a set of links (breadcrumbs) that can help a user understand and navigate your site's hierarchy."
Artian bebas:
"Sebuah lintasan breadcrumb adalah satu set kumpulan link yang dapat membantu pengguna memahami dan bernavigasi dalam hirarki situs anda."
(Sumber: Google Webmaster Support)
Jadi memiliki sebuah lintasan breadcrumb maka website atau blog anda telah mengikuti aturan yang di rekomendasikan disiplin ilmu desain web / blog dan juga SEO (untuk SEO masih dalam perdebatan, namun karena Google rekomendasikan navigasi ini maka ia termasuk SEO).
Baiklah setelah penjelasan singkat mengenai apa itu dan manfaat Breadcrumb, kini giliran memasang lintasan navigasi ini di Blogspot milik anda, untuk membantu pembaca dan pengunjung saat berpetualang di blog milik anda:
Cara Pasang Breadcrumb Di Blog Blogspot
1. Log-in ke Blogger.com gunakan akun anda.
2. Kemudian menuju Rancangan lalu Edit HTML jika anda masih gunakan tampilan lama dashboard Blogspot maka klik Expand Template Widget. Lalu masukan CSS Breadcrumb berikut ini:
.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;
Letakan kode CSS diatas sebelum tag ini: ]]></b:skin>.
3. Kemudian anda cari tag berikut ini:
<a expr:name='data:post.id'/>
4. Setelah ketemu maka masukan kode tag Breadcrumb berikut ini di atas kode sebelumnya:
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'> <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>
5. Kemudian klik tombol Simpan Template atau Save Template anda.
Selamat! Karena kamu telah memiliki navigasi Breadcrumb di blog Blospot kamu.
