Cara memasang breadcrumb pada blog Blogger

Apa sih itu breadcrumb?

Breadcrumb adalah sebuah alat navigasi yang akan sangat membantu pembaca blog blogspot anda. Pada saat pembaca berada di halaman sebuah portingan, breadcrumb akan menunjukkan di mana dia sedang berada dan hubungan antara postingan tersebut dengan labelnya. Lihat gambar di bawah ini:

Kalau kurang jelas, silakan ikuti saja dan install breadcrumb di blog blogspot anda. Anda akan melihat hasilnya seketika.

1. Masuk ke kode HTML template blog blogspot anda, dan cari kode ini: ]]></b:skin>. Gunakan Ctrl + F atau bisa juga dengan F3 untuk mencarinya.
2. Kalau sudah ketemu, ganti kode tersebut dengan kode di bawah ini:

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
]]></b:skin>

3. Sekarang cari lagi kode ini: <b:include data='top' name='status-message'/> dan ganti dengan kode di bawah ini:

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

4. Berikutnya yang mau diganti adalah <b:includable id='main' var='top'>. Penggantinya adalah:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>

5. Save template anda yang sudah ada kode breadcrumb-nya. Mau preview sekarang? Jangan lupa mengklik salah satu postingan yang ada untuk melihat breadcrumb beraksi.

Bagaimana? Berhasil?