Tutorial Cara memasang Navigasi Breadcrumb

Kali ini saya mau berbagi Tutorial Cara memasang Navigasi Breadcrumb. Sudah tau kan apa Navigasi Breadcrumb itu? Jika belum lihat di bagian atas posting ini, trus yang mana. Itu yang di bawah deskripsi blog ini. Mau tahu cara buatnya? Silahkan ikuti petunjuk di bawah ini.

1. Seperti biasa login dulu ke akun Blogger sobat.
2. Masuk tab Rancangan lalu pilih yang Edit HTML.
3. Silahkan backup template sobat terlebih dahulu dengan klik Download Template Lengkap.
4. Centang Expand Template Widget.
5. Kemudian cari kode ini <b:include data='top' name='status-message'/> , biar lebih mudah silahkan gunakan fitur Search pada browser sobat dengan perintah Ctrl + F.
6. Lalu tandai kode tersebut dan ganti dengan kode ini

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

7. Kemudian cari kode berikut <b:includable id='main' var='top'> , tandai kode tersebut lalu ganti dengan kode di bawah ini.

<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'>
<!--Breadcrumbs code info @ http://www.go-blogseo.blogspot.com/-->

8.  Kemudian cari kode ini ]]></b:skin> , lalu tambahkan kode CSS berikut di atas atau sebelum kode tersebut.

/* Breadcrumbs CSS info @ http://www.go-blogseo.blogspot.com / */
.breadcrumbs{font-size:95%;line-height:1.4em;border-bottom:3px double #e6e4e3;margin:0 0 15px;padding:5px 5px 5px 0;}

9. Simpan template sobat. Sekarang coba sobat lihat hasilnya
itulah Tutorial Cara memasang Navigasi Breadcrumb