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.
0 Comments
