Membuat Navigasi Breadcrumb

Saya telah memasang Navigasi Breadcrumb pada blgo saya. Cukup sederhana sih sebenarnya tapi navigasi ini sangat membantu untuk menemukan artikel dan mengetahui dimana letak halaman yang sedang dikunjungi.

Navigasi Breadcrumb sangat mirip fungsinya dengan address bar pada windows explorer, namun pada Navigasi Breadcrumb kita tidak dapat menuliskan alamat yang akan dituju secara manual.

Untuk membuatnya login ke akun blogger anda. Masuk ke bagian Design, Edit html kemudian cari kode seperti dibawah ini (sesuai dengan template yang anda gunakan):

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Travel
Designer: Sookhee Lee
URL:      www.plyfly.net
----------------------------------------------- */

Letakkan kode CSS berikut dibawah kode tersebut.
Kode CSS-nya:

.breadcrumb {

padding:5px 5px 5px 0px;

margin: 0px 0px 10px 0px;

font-size:90%;

line-height: 1.2em;

border-bottom:3px double #e6e4e3;

}

Sehingga kodenya tampak seperti ini:

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Travel
Designer: Sookhee Lee
URL:      www.plyfly.net
----------------------------------------------- */

/* Breadcrumb
========================== */
.breadcrumb {

padding:5px 5px 5px 0px; 

margin: 0px 0px 10px 0px; 

font-size:90%; 

line-height: 1.2em; 

border-bottom:3px double #e6e4e3;

}

Selanjutnya cari kode <b:if cond='data:post.title'> dan pasang kode breadcrumb ini di bawahnya:

<b:if cond='data:blog.pageType == "item"'>
<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 != "true"'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>

Kurang-lebihnya peletakan kode adalah seperti ini,

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

<b:if cond='data:blog.pageType == "item"'>
<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 != "true"'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>

Save template dan lihat hasilnya!

Anda dapat melukukan modifikasi sendiri terhadap kode tersebut, sehingga anda dapat menciptakan kreasi baru sesuai dengan keinginan anda. Semoga bermanfaat!