Bagimana Menambahkan Breadcrumb di Blogger

Breadcrumb adalah bagian yang menunjukan posisi halaman yang dibuka oleh pengunjung blog, secara default di template blogger tidak terdapat breadcrumb. Breadcrumb sangat berguna untuk kemudahan navigasi pengunjung agar tidak kebingungan disaat membuka halaman blog.

Breadcrumb tidak terdapat pada template Blogger default, umumnya susunan Breadcrumb adalah Home > Label > Judul posting. BagaimanaMenambahkan Breadcrumb di Blogger ?

Breadcrumb di Blogger

Untuk menambah breadcrumb di blogger diperlukan beberapa script tambahan,

Berikut langkah-langkahnya :

1. Login ke Dashboard
2. Masuk ke menu Rancangan(Design) > Edit HTML.
3. Jangan lupa untuk membackup template dengan klik Download Template Lengkap
4. Lalu centang ExpandTemplate Widget
5. Cari kode berikut :
   <b:include data='top' name='status-message'/>
6. Lalu ganti dengan :
   <b:include data='top' name='status-message'/> <b:include data='posts' name='breadcrumb'/>
7. Kemudian cari kode ini :
   <b:includable id='main' var='top'>
8. Ganti dengan kode berikut :
   <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'>
9. Terakhir cari kode]]></b:skin> ganti dengan kode berikut :
   .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>

Sekarang anda bisa tinggal klik save dan jika tidak ada kesalahan, sekarang breadcrumb telah terpasang di blog anda.
Selamat mencoba !!