Cara Membuat Breadcrumb-Navigation Pada Blogspot

Breadcrumb-navigation bisa membuat template kita lebih seo friendly, karena akan mempermudah search engine menemukan artikel-artikel kita. Navigasi ini dikenal dengan nama breadcrumb-navigation.
Tidak hanya itu dengan adanya breadcrumb-navigation maka pembaca dapat dengan mudah melihat posisi artikel yang dibaca serta mencari artikel dalam satu kategori. Breadcrumb-navigation bisa dipasang pada template blogger dengan sedikit modifikasi pada templatenya, dengan begitu breadcrumb-navigation akan lebih mudah jika langsung dipraktekkan.

Langkah-langkah/cara memasang breadcrumb navigation:

1. Login ke blogger.com.
2. Klik Rancangan.
3. Pilih tab Edit HTML.
4. Click Download Full Template and please back up your template first.
5. Kemudian beri tanda centang pada kotak kecil di samping tulisan Expand Template Widget.
6. Silahkan cari kode:

]]></b:skin>

7. Ganti kode pada langkah 6 dengan:

.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>

8. Sekarang cari kode:

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

9. Ganti kode pada langkah 8 dengan:

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

10. Lalu cari kode:

<b:includable id='main' var='top'>

11. Ganti kode pada langkah 10 dengan:

<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'>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>
<b:else/>
» </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'>Beranda</a> » <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'>Beranda</a> » Semua Artikel
<b:else/>
<a expr:href='data:blog.homepageUrl'>Beranda</a> » <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>

12. Sekarang Simpan Template blog Anda, lihat hasilnya!

Selamat Mencoba!