Breadcrumbs merupakan navigasi pada blog yang sangat penting keberadaannya, karena dapat memudahkan pengunjung untuk menelusuri satu demi satu halaman yang ada pada blog kita.
mau mencobanya? berikut ini langkah-langkah Membuat Navigasi Breadcrumbs Pada Blogger.
1.Log in ke blogger dengan akun yang anda miliki.
2.Masuk ke rancangan » Edit HTML » centang kotak Expand Template Widget.
3.Copy dan pastekan kode CSS di bawah ini sebelum kode ]]>.
4.Kemudian cari kode di bawah ini.
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
Nonaktifkan status pesan standar dibawah ini , anda juga bisa menghapusnya tetapi lebih baik kita menonaktifkannya saja karena sebagai perbandingan antara sebelum dan sesudah di modifikasi.
<!-- <b:include data='top' name='status-message'/> -->
Tambahkan kode untuk menggantikan status pesan standar , seperti yang ada di bawah ini.
<!-- <b:include data='top' name='status-message'/> -->
<b:include data='posts' name='breadcrumb'/>
5.Perhatikanlah cara ke 4 dan cari kode berikut ini .
<b:includable id='main' var='top'>
6.Pastekan kode breadcrumbs di bawah ini di atas kode yang ada di langkah ke 5.
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</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>
» <span><data:post.title/></span>
</b:if>
</b:loop>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Beranda</a> » Arsip untuk <data:blog.pageName/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
Browse » <a expr:href='data:blog.homepageUrl'>Beranda</a> » Seluruh Artikel
<b:else/>
Browse » <a expr:href='data:blog.homepageUrl'>Beranda</a> » Artikel Pada Kategori <data:blog.pageName/>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
7.Jadi kalau sudah digabunggkan menjadi seperti ini
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</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>
» <span><data:post.title/></span>
</b:if>
</b:loop>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Beranda</a> » Arsip untuk <data:blog.pageName/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
Browse » <a expr:href='data:blog.homepageUrl'>Beranda</a> » Seluruh Artikel
<b:else/>
Browse » <a expr:href='data:blog.homepageUrl'>Beranda</a> » Artikel Pada Kategori <data:blog.pageName/>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='posts' name='breadcrumb'/>
<data:adStart/>
Catatan: Jika tidak ingin mengambil resiko karena Cara Membuat Navigasi Breadcrumbs ini cukup banyak, sebaiknya anda mendownload template lengkap dahulu sebelum melakukan pengeditan agar jika anda mengalami kesalahan dalam memasukkan kode-kode yang ada di atas anda masih menyimpan cadangan dari template anda.