Cara Membuat Breadcrumb di Blog

Pada postingan sebelumnya kita sudah mengetahui definisi, fungsi dan manfaat Breadcrumb  Navigation. Nah, postingan kali ini saya coba akan jelaskan bagaimana cara membuat/memasang breadcrumb di blogspot atau blogger. Tanpa panjang kali lebar nanti jadi luas, langsung saja ikuti langkah-langkah berikut dengan baik...OK, sob?

1. Login ke Blogger.com => Pilih tab Design => Pilih tab Edit HTML => ceklis pada Expand Widget Tamplates (copy seluruh kode tamplate anda terlebih dahulu untuk back up, jika terjadi kegagalan)

2. Cari kode berikut dengan menggunakan Control + F : ]]></b:skin>

3. Copy kode berikut di atas kode ]]></b:skin> :

.breadcrumb {

padding:5px 5px 5px 0px;

margin: 0px 0px 10px 0px;

font-size:90%;

line-height: 1.2em;

border-bottom:3px double #e6e4e3;

}

4. Cari kode berikut dengan menggunakan Control + F : <b:includable id='post' var='post'>  
5.  Copy kode berikut di bawah kode <b:includable id='post' var='post'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='breadcrumb'>

<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

</b:loop>

&#187;

</b:if>

<data:post.title/>

</div>

</b:if>

6. Klik Save Tamplate

Silahkan lihat hasilnya. Jika berhasil, maka akan ada Breadcrumb Navigation di atas setiap postingan. Demikian semoga tutorial yang sedikit ini bermanfaat. Selamat mencoba !!!