Cara Memasang Breadcrumbs Trail (Navigasi) Di Blogger - BBT: Cara memasang breadcrumb di blogger untuk navigasi halaman. Panduan membuat breadcrumbs trail masuk ke google penelusuran

Cara Memasang Breadcrumbs Trail (Navigasi) Di Blogger

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

Pada sebuah blog breadcrumb berguna 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 seperti ini :
Home > Label > Label > Judul Posting
Untuk contoh nyata bisa dilihat di blog ini
breadcrumbs
Selain breadcrumb dapat digunakan untuk navigasi halaman blog, biasanya breadcrumb terindex di google dengan penampakan seperti ini.
breadcrumbs masuk google

Tutorial Lengkap Memasang Breadcrumbs Trail Di Blogspot

Bagi sobat 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 sobat untuk jaga - jaga
  4. Klik Edit HTML untuk membuka halaman editor template blogger
  5. Setelah itu ikuti panduan berikut
Pertama
Kita akan memberikan style untuk tampilan breadcrumb yang akan kita pasang tersebut, caranya :
Cari kode ]]></b:skin>
Pasang kode css berikut tepat di atas kode ]]></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 kode yang akan menampilkan breadcrumb di blog kita, caranya :
Cari kode <b:includable id='main' var='top'>
Ganti kode tersebut dengan seluruh kode 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='Blog Baca Tulis'><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 sampai tahap ini kita sudah berhasil membuat breadcrumbs, namun jika sobat ingin melakukan pengecekan apakah breadcrumbs di blog sobat sudah terpasang dengan benar dan sesuai dengan google rich snippets sehingga nantinya dapat diindex (masuk pada pencarian google) maka silakan sobat kunjungi halaman Google Rich Snippets  Testing Tool.

Masukkan URL salah satu halaman posting blog sobat pada kolom yang disediakan, kemudian tekan Enter atau klik tombol JALANKAN PENGUJIAN.
Jika pada hasil tes terdapat bagian Breadcrumb (lihat gambar dibawah), maka itu artinya breadcrumbs yang sobat pasang akan dapat masuk ke hasil penelusuran google.
Breadcrumbs Trail
Nah itulah cara memasang breadcrumbs di blogger, semoga mudah dimengerti dan bermanfaat.
loading...
Lihat / Tinggalkan Komentar
- All Rights Reserved. Powered by Blogger. Membuat Blog

Terimakasih telah membaca , semoga artikel tentang Cara Memasang Breadcrumbs Trail (Navigasi) Di Blogger yang ada di blog ini bermanfaat buat sobat