Skip to main content

Setting Breadcrumb untuk Blogger

Apa itu Breadcrumb?
Breadcrumb adalah petunjuk arah.

Saat anda berjalan-jalan di mall, tentu anda akan melihat petunjuk arah jika anda merasa kesasar.

Dengan petunjuk arah tersebut anda mengetahui anda sedang berada dimana.

Begitulah breadcrumb dalam sebuah situs atau blog.

Dengan adanya breadcrumbs, visitor atau pembaca postingan blog akan merasa dia berada disebuah tempat dengan tema tertentu.

Dengan mengetahui topik yang sedang dibahas kemungkinan besar visitor akan berada lama diblog atau website yang dikelola untuk mengetahui apa saja yang bisa diberikan blog atau website tersebut mengenai topik yang sedang ia cari.

Dengan template standar dari blogger kita pun bisa membuat breadcrumb, tulisan ini akan menyampaikan kepada rekan-rekan semua cara setting breadcrumb untuk blogger.
Cara setting breadcrumb jika dilihat dari penjelasan yang didapat di Laman Google Developer.

Dalam laman tersebut anda akan menemukan beberapa cara untuk setting breadcrumb tergantung bahasa / kode yang digunakan.

Untuk pengguna akun blogger, kode/bahasa yang digunakan adalah kode microdata.

Dari halaman penjelasan dari link google tadi stuktur breadcrumb yang akan saya gunakan dalam template blogger standar ini seperti berikut:
<div itemscope itemtype='http://data-vocabulary.org/Breadcrumb'>
<a href='http://www.belajarbloggingdengan.blogspot.com' itemprop="url">
<span itemprop="title">Home</span>
</a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.belajarbloggingdengan.blogspot.com/search/label/dasar" itemprop="url">
<span itemprop="title">Label 1</span>
</a> ›
</div>


Label ini berfungsi untuk memberikan kategori kepada konten yang anda terbitkan.

Misal anda membuat konten tentang pantai (apakah itu berupa video, gambar, atau teks atau gabungannya) maka anda akan memberi kategori pantai untuk konten tersebut.

Berikut kode dari label/kategori yang terdapat di template blog tersebut

<span class='post-labels'><b:if cond='data:post.labels'> <data:postLabelsLabel/>           <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if> </b:loop> </b:if>       </span>

Kode diatas terlihat pada tampilan blog kita sebagai berikut

Dari kondisi awal tersebut kita dapat mengubahnya dengan menambahkan Site Navigation Element ala http://schema.org/.
Cara Setting Breadcrumb di Blogger

  1. sign in pada akun blogger anda

  2. masuk ke menu template > edit html

  3. cari kode <span class='post-labels'>

  4. pada kode tersebut diatas kode itemscope itemtype='http://data-vocabulary.org/Breadcrumb' hingga tag span tersebut menjadi <span class='post-labels' itemscopeitemtype='http://data-vocabulary.org/Breadcrumb'>

  5. UBAH <data:labelslabel> dengan <a expr:href='data:blog.homepageUrl' itemprop="url">     <span itemprop="title">Home</span>   </a> ›

  6. Selanjutnya anda harus menambahkan kode &gt;&gt; <data:post.title/> setelah kode terakhir </b:loop> </b:if> </span>

  7. Klik tombol save.

Jika anda melakukannya dengan benar maka pada tampilan blog anda akan terlihat seperti dibawah
Seperti yang saya sampaikan pada postingan mengenail mengenal kode html template blogger jika kita mengganti template blogger dengan desain yang kita inginkan, begitu pula dengan setting breadcrumb untuk blogger.
Hanya saja teknik ini masih perlu banyak diuji di data struktur yang agar tampilan blog semakin lebih profesional dan lebih menarik.

Comments