Membuat Navigasi Breadcrumb di Blogger

Dengan adanya navigasi breadcrumbs, pengunjung dapat dengan mudah mengetahui dihalaman mana ia sedang membaca.
Secara default, Blogger tidak menyediakan fitur ini, tapi pengguna bisa memanfaatkan tag kondisional <b:if cond="..."> dan data label yang ada di Blogger. Dengan begitu, pengguna pun bisa leluasa untuk kustomisasi tanpa batas.
Sebelum memulai, ada baiknya untuk memahami data label yang ada di Blogger, berikut ini adalah beberapa contoh data label yang ada di Blogger beserta penjelasan singkat;

Note: Untuk memanggil data di blogger, gunakan data:NAMADATA. Dalam kasus ini adalah data label.

• data:label.name digunakan untuk menampilkan nama label
• data:label.url digunakan untuk memanggil url label saat menggunakan anchor atau tag <a>
• data:post.label digunakan untuk memanggil data label

MENGGUNAKAN KONDISIONAL

Atribut kondisional diblogger digunakan didalam tag <b:if> dan ditulis cond=''.
Contoh: <b:if cond="data:blog.homepageUrl"> digunakan untuk menyematkan link / URL beranda.

MEMBUAT NAVIGASI BREADCRUMBS

Pertama-tama kita buat kondisional untuk navigasi breadcrumbs hanya tampil pada halaman post saja dan tidak akan tampil di halaman awal.

Breadcrumb HTML

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<ul class='breadcrumb'>   <li><a expr:href='data:blog.homepageUrl' rel='tag'>>span class='fa fa-home'/></a></li>
  <li><b:loop values='data:posts' var='post'>
    <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'>
        <b:if cond='data:label.isLast == true'>
        <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
        </b:if>
      </b:loop>
      <b:else/>
      Unlabelled     </b:if>
  </b:loop>
  </li>
  <li class='active'><data:post.title/></li>
</ul>
</b:if>

Breadcrumb diatas hanya akan tampil pada halaman post saja, dan tampilannya akan seperti dibawah ini;

Contoh hasil Breadcrumb diatas / lihat diatas judul post ini;

• Breadcrumb
• Membuat Navigasi Breadcrumb di Blogger

SETTING TAMPILAN PADA HALAMAN LAIN (OPSIONAL)

Kalau kamu ingin menampilkannya juga pada halaman lain, cukup gunakan atribut kondisional pada tag b:if.
Tapi, berhubung dihalaman lain (termasuk halaman mandiri / statis) tidak memiliki label, saya akan tulis kodenya untuk hanya menampilkan link beranda dan nama halaman yang sedang dibuka. Cukup tambahkan kode dibawah ini dan satukan dengan kode diatas.

Breadcrumb untuk halaman lain

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<ul class='breadcrumb'>
  <li><a expr:href='data:blog.homepageUrl'><i class='fa fa-home'><i></a></li>
  <li class='active'><data:blog.pageName/></li>
</ul>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<ul class='breadcrumb'>
  <li><a expr:href='data:blog.homepageUrl'><i class='fa fa-home'><i></a></li>
  <li class='active'><data:blog.pageName/>
</ul>
</b:if>
<b:if cond='data:blog.searchLabel'>
<ul class='breadcrumb'>
  <li <a expr:href='data:blog.homepageUrl'><i class='fa fa-home'></i></a></li>
  <li class='active'><data:blog.pageName/>
</ul>
</b:if>

TAMBAHKAN CSS

Untuk mengkostumisasi tampilan breadcrumb, gunakan CSS dibawah, ubahlah sesuai keinginan.

CSS Breadcrumbs

.breadcrumb {
  padding: 8px 15px;
  margin-bottom: 20px;
  list-style: none;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.breadcrumb>li {
  display: inline-block;
}

.breadcrumb>li+li:before {
  padding: 0 5px;
  color: #ccc;
  content: "/\00a0"
}

.breadcrumb>.active {
  color: #777;
}

PENEMPATAN

Untuk menerapkannya di template, tempatkan pada deretan header-line yang ada di dalam widget Blog1. Kalau kamu bingung untuk penempatannya, cari kode <div class='blog-posts hfeed'>.
Kalau template kamu memiliki dua atau lebih tag tersebut, pilihlah yang pertama, lalu tempatkan HTML breadcrumb tepat dibawah <div class='blog-posts hfeed'>.

Untuk penempatan CSS, tempatkan didalam <b:skin> atau tepat diatas ]]></b:skin>, atau juga bisa diatas </style>.

FINALIZING

Hal terakhir yang diperlukan adalah menyimpan template, atau preview dahulu. Kalau kamu perlu bantuan, silahkan isi kolom komentar dibawah, atau isi form kontak yang ada dibawah.

NOTE

Style breadcrumb ini saya ambil dari style breadcrumb dari Bootstrap. Kalau kamu gak mau pusing dengan kode CSS, download Bootstrap css, host sendiri dan link ke template.
Jika nama judul tidak tampil, ubah data:post.title dengan data:blog.pageName.
Untuk memunculkan icon, gunakan icon dari FontAwesome. Kunjungi Font Awesome.

____________________
featured image source: emaj.fr