Basic Pembuatan Breadcrumb di Blog

Malam ini saya hanya ingin sedikit berbagi tentang Basic Cara Pembuatan Breadcrumb di Blog , ada yang tahu "Breadcrumb?" untuk yang belum tahu seperti apa Breadcrumb yang saya maksud, berikut penjelasannya :

Sekilas Tentang "Breadcrumb"

Breadcrumb adalah navigasi menu untuk memudahkan pengunjung web/blog melacak lokasi dalam dokumen dan kembali ke halaman awal dengan mudah.
Posisi Breadcrumb sendiri tidak selalu berada di bawah judul Blog / di atas blog , tapi breadcrumb ini sendiri bisa kita simpan dimana saja. Namun disini saya hanya akan memberitahukan cara membuat Breadcrumb sederhana atau bisa di bilang "Basic" kenapa? karena yang saya bagikan disini hanya cara Pemasangan Breadcrumb di blog pada intinya saja . selanjutnya bisa Sobat kreasikan sendiri .

Seperti apa Breadcrumb ini ? , berikut contoh nya :

Cara Pemasangan :

Langkah #1 - Pastikan Sobat sudah Login Blogger > Template > Edit HTML, setelah masuk pada area HTML Editor silahkan cari kode </head> lalu simpan kode dibawah ini di tepat di atas nya :


<style type="text/css">
.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}
</style>

Langkah #2 - Setelah itu cari kode <b:includable id='main' var='top'> , lalu ganti dengan kode di bawah ini :


<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' rel='tag'>Halaman Pertama</a></span> &#187; <span><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' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Halaman Pertama</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Halaman Pertama</a></span> &#187; <span>Tanpa Kategori.</span> &#187; <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'>
<span><a expr:href='data:blog.homepageUrl'>Halaman Pertama</a></span> &#187; <span>Archives 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;'>
<span><a expr:href='data:blog.homepageUrl'>Halaman Pertama</a></span> &#187; <span>Menampilkan Semua Posting</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Halaman Pertama</a></span> &#187; <span>Pencarian dengan kata kunci "<b><data:blog.pageName/></b>"</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'/>

Langkah Terakhir! - Simpan Template! :)

Untuk melihat perubahan nya, silahkan lihat menggunakan Rich Snippet Tools
Atau melalui Link Rich Snippet di bawah ini :
http://www.google.com/webmasters/tools/richsnippets

Untuk mencoba apakah tampil beberapa label, copy postingan Anda yang mempunya label lebih dari 1. dan klik Pratinjau. Kalau sudah berhasil berarti breadcrumbs terpasang dengan baik.

Special thanks to : Kang Ismet