Cara Membuat Navigasi Breadcrumbs Pada Blogger

Breadcrumbs digunakan untuk menginformasikan kepada pengunjung mengenai posisi terakhir mereka saat menelusuri suatu blog/web. Dengan menggunakan breadcrumbs tentunya akan memudahkan bagi pengunjung suatu blog untuk kembali ke halaman sebelumnya. Dan kata orang-orang menu navigasi ini sangat disukai oleh mbah google dan tentunya akan menunjang SEO blog kita .
Breadcrumbs merupakan navigasi pada blog yang sangat penting keberadaannya, karena dapat memudahkan pengunjung untuk menelusuri satu demi satu halaman yang ada pada blog kita.



Bagaimana? apakah anda 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 ]]></b:skin>.

.breadcrumbs{
float:left;
width:590px;
font-size:11px;
border-bottom:double #eaeaea;
margin:0 0 20px;
padding:0 0 3px
}

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 == &quot;item&quot;'>
<div class='breadcrumbs'>
Browse &#187; <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 == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
&#187; <span><data:post.title/></span>
</b:if>
</b:loop>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187; Arsip untuk <data:blog.pageName/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187; Seluruh Artikel
<b:else/>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187; 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 == &quot;item&quot;'>
<div class='breadcrumbs'>
Browse &#187; <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 == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
&#187; <span><data:post.title/></span>
</b:if>
</b:loop>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187; Arsip untuk <data:blog.pageName/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187; Seluruh Artikel
<b:else/>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187; 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.

Sekian dulu tutorial tentang Cara Membuat Navigasi Breadcrumbs Pada Blogger semoga bisa bermanfaat bagi sobat blogger semua.