Membuat breadcrumb navigation

Pada tutorial kali ini saya akan menjelaskan bagaimana cara membuat menu breadcrumb navigation atau navigasi breadcrumb.
navigasi breadcrumb adalah sebuah barisan menu dari tautan internal sebuah blog,jadi jika pengunjung ingin kembali kehalaman sebelumnya dia dapat mengklik menu breadcrumb tersebut,menu breadcrumb biasanya dimulai dari ( home page ) setelah itu label baru judul artikel blog tersebut,agar lebih jelas kira-kira akan seperti dibawah ini.

Browse » Home » turorial blogger » Membuat breadcrumb navigation.

Atau anda bisa melihat pada bagian atas blog ini,tapi jangan salah,menu breadcrumb juga berguna sebagai optimasi seo pada blog anda,bahkan ketika saya melihat-lihat blog tetangga tentang optimasi seo blogger sebagian dari mereka menyarankan untuk menggunakan menu navigasi breadcrumb ini,jadi saya pasang saja di blog ini.

Image 0.1 . Breadcrumb Navigation

Jadi untuk blogger yang ingin memasang menu breadcrumb navigation ini anda ikuti saja langkah-langkah dibawah ini,dengan teliti iy...

1. Seperti biasa anda harus login dulu di Blogger anda

2. Masuk ke Tata Letak - Edit HTML

3. Jangan lupa beri centang pada Expand Template Widget

4. Cari lah kode ]]></b:skin>,untuk mempermudah pencarian anda tekan tombol CRTL + F.

5. Lalu letakan kode dibawah ini diatas kode ]]><b:skin>.

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

6. Setelah itu anda cari kode <div class='post hentry uncustomized-post-template'>
7. Bila sudah ketemu lalu anda letakan kode dibawah ini tepat dibawah kode yang tadi

<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'>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 == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>

</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>

8. Langkah terakhir anda hanya perlu menyimpan klik Simpan Template.

Coba lihat blog anda,apakah sudah terpasang menu yang sama seperti menu breadcrumb punya saya,bila sudah berhasil saya ucapkan selamat,dan terima kasih.