Cara Memasang Breadcrumbs Trail (Navigasi) Di Blogger

Cara memasang breadcrumb di blogger tidaklah sulit asal kita mau mempelajari caranya.
Breadcrumb mampu juga disebut sebagai navigasi halaman yang biasanya dipasang di atas posting sebuah blog.

Pada sebuah blog breadcrumb berkhasiat untuk menunjukkan posting tersebut berada dalam kategori apa (kalau di blogger label) yang biasanya disertai dengan link yang menuju ke halaman kategori / label tersebut dan juga disertai dengan link yang menuju kehalaman awal blog tersebut.

Dengan adanya breadcrumb tersebut maka pengunjung dapat dengan mudah menemukan artikel lainnya yang berada dalam kategori / label yang sama.

Biasaya breadcrumb / navigasi halaman terlihat menyerupai ini :

Home > Label > Label > Judul Posting

Untuk pola konkret mampu dilihat di blog ini

Selain breadcrumb dapat digunakan untuk navigasi halaman blog, biasanya breadcrumb terindex di google dengan penampakan menyerupai ini.

Tutorial Lengkap Memasang Breadcrumbs Trail Di Blogspot

Bagi sahabat yang ingin tahu bagaimana cara memasang breadcrumb di blogger (blogspot), maka silakan ikuti langkah - langkah yang saya tuliskan dalam tutorial ini.

Langkah langkah yang harus dilakukan :

1. Masuk ke dasbor blogger
2. Buka halaman Template
3. Backup dahulu template blog sahabat untuk jaga - jaga
4. Klik Edit HTML untuk membuka halaman editor template blogger
5. Setelah itu ikuti panduan berikut

Pertama
Kita akan menawarkan style untuk tampilan breadcrumb yang akan kita pasang tersebut, caranya :
Cari instruksi ]]></b:skin>
Pasang instruksi css berikut sempurna di atas instruksi ]]></b:skin>

 .breadcrumbs {margin: 0 0 1em 0; padding:0.5em 0.5em 0.5em 0; font-size:90%; line-height: normal; border-bottom:1px solid #d5d5d5;} 

Catatan: Kode css di atas tidak bersifat baku, silakan edit sesuai keinginan.

Kedua
Kita akan memasang instruksi yang akan menampilkan breadcrumb di blog kita, caranya :
Cari instruksi <b:includable id='main' var='top'>
Ganti instruksi tersebut dengan seluruh instruksi berikut

 <b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl'><i class='fa fa-home'/> Home</a></span><span class='index'><i class='fa fa-file-text-o'/> <data:blog.pageName/></span></div> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <!-- breadcrumb for the post page --> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <div class='breadcrumbs'> <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'><i class='fa fa-home'/> Home</span></a></span><b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><i class='fa fa-folder-open-o'/> <span itemprop='title'><data:label.name/></span></a></span></b:loop> <span class='index' expr:title='data:post.title'><i class='fa fa-file-text-o'/> <b><data:post.title/></b></span> </div> <b:else/> <div class='breadcrumbs'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'><i class='fa fa-home'/> Home</span></a><i class='fa fa-angle-right'/> <span class='index'>Unlabelled</span> <i class='fa fa-file-text-o'/> <span><data:post.title/></span></div> </b:if> </b:loop> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <!-- breadcrumb for the label archive page and search pages.. --> <div class='breadcrumbs'> <a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'><i class='fa fa-home'/> Home</span></a><span class='index'>Archive for <data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.pageType == &quot;index&quot;'> <div class='breadcrumbs'> <b:if cond='data:blog.pageName == &quot;&quot;'> <a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'><i class='fa fa-home'/> Home</span></a><span class='index'><i class='fa fa-file-text-o'/> All Post</span> <b:else/> <span><a expr:href='data:blog.homepageUrl' itemprop='url' title=''><i class='fa fa-home'/></a></span><span class='index'><i class='fa fa-folder-open-o'/> <data:blog.pageName/></span> </b:if> </div> </b:if> </b:if> </b:if> </b:if> </b:if> </b:includable> <b:includable id='main' var='top'> <b:include data='posts' name='breadcrumb'/> 

Jika sudah jangan lupa klik simpan pengaturan template blog sobat.

Apa selanjutnya ?

Sebenarnya hingga tahap ini kita sudah berhasil membuat breadcrumbs, namun jikalau sahabat ingin melaksanakan pengecekan apakah breadcrumbs di blog sahabat sudah terpasang dengan benar dan sesuai dengan google rich snippets sehingga nantinya dapat diindex (masuk pada pencarian google) maka silakan sahabat kunjungi halaman Google Rich Snippets  Testing Tool.

Masukkan URL salah satu halaman posting blog sahabat pada kolom yang disediakan, kemudian tekan Enter atau klik tombol JALANKAN PENGUJIAN.
Jika pada hasil tes terdapat bab Breadcrumb (lihat gambar dibawah), maka itu artinya breadcrumbs yang sahabat pasang akan dapat masuk ke hasil penelusuran google.

Nah itulah cara memasang breadcrumbs di blogger, agar mudah dimengerti dan bermanfaat.