Navigasi Breadcrumbs dengan Microdata

Anda mungkin pernah membaca posting Menambah Lokasi Link Post (Breadcrumbs Trail) oleh Hoctro. Posting ini juga berhubungan dengan hal tersebut, namun di-aransemen dengan beberapa hack agar muncul di beberapa halaman & ditambahkan format microdata data-vocabulary. Penggunaan data-vocabulary dimaksudkan agar breadcrumbs mampu berdiri sendiri, sehingga akan harmonis dengan format microdata http://schema.org/Blog. Lebih lanjut mengenai breadcrumbs yang didukung beberapa format dapat kita telaah pada Rich snippets — Breadcrumbs.

<b:includable id='breadcrumb' var='posts'>
  <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <b:if cond='data:blog.pageType == "static_page"'>
  <!-- breadcrumb for the static page -->
  <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a> / <span itemprop='title'><data:blog.pageName/></span></div>
    <b:else/>
      <b:if cond='data:blog.pageType == "item"'>
  <!-- breadcrumb for the post page -->
        <b:loop values='data:posts' var='post'>
          <b:if cond='data:post.labels'>
  <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a>
    <b:loop values='data:post.labels' var='label'>
      <b:if cond='data:label.isLast == "true"'>
  / <a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a>
      </b:if>
    </b:loop>
  / <span itemprop='title'><data:post.title/></span></div>
          <b:else/>
  <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a> / <span itemprop='title'>Tanpa Label</span> / <span itemprop='title'><data:post.title/></span></div>
          </b:if>
        </b:loop>
      <b:else/>
        <b:if cond='data:blog.pageType == "archive"'>
  <!-- breadcrumb for the label archive page -->
  <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a> / <span itemprop='title'>Arsip <data:blog.pageName/></span></div>
        <b:else/>
          <b:if cond='data:blog.pageType == "index"'>
  <!-- breadcrumb for non home page (2nd, search, label page) -->
            <b:if cond='data:blog.pageName == ""'>
  <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a> / <span itemprop='title'>Penelusuran Arsip Posting</span></div>
            <b:else/>
  <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a> / <span itemprop='title'><data:blog.pageName/></span></div>
            </b:if>
          </b:if>
        </b:if>
      </b:if>
    </b:if>
  </b:if>
</b:includable>

Untuk pengkodean berwarna merah, dapat diganti sesuai keinginan Anda dengan menyesuaikan pula di halaman apa ia ditampilkan. Sedangkan warna biru (“/”) merupakan pemisah (separator) antar title. Letakkan pengkodean pada “Edit HTML”, jangan lupa centang Expand Widget Templates. Kemudian cari kode berikut & taruh di atasnya.

<b:includable id='main' var='top'>

Kita telah menambahkan widget breadcrumbs (kalau boleh dikatakan demikian), tinggal cara memanggil serta meletakkan kode pemanggilan tersebut. Perlu diperhatikan, kemungkinan pengkodean tiap template dapat berbeda-beda. Cara memanggilnya adalah melalui markah berikut.

<b:include data='posts' name='breadcrumb'/>

Letakkan kode pemanggilan itu di atas <b:include data='top' name='status-message'/>, seperti yang dapat kita amati di bawah ini.

<!-- posts -->
<div class='blog-posts hfeed'>

  <b:include data='posts' name='breadcrumb'/>
  <b:include data='top' name='status-message'/>

Sedangkan untuk melakukan beberapa kustomisasi, tambahkan selector .breadcrumbs pada CSS template atau letakkan saja di atas ]]></b:skin>. Contoh:

.breadcrumbs {
  font: .875em/1.7143em monospace;
  margin: 0 0 1.7143em;
}

Penambahan breadcrumbs di atas, khusus dilakukan pada Blogger™ & pengkodeannya tidak mutlak demikian. Artinya kita masih dapat merubah atau melakukan modifikasi sesuai dengan pengkodean template yang digunakan.

Bahan Bacaan: Breadcrumb for Blogger format RDF (Resource Description Framework) — Blogger Plugins.