Membuat navigasi breadcrumb di blogger

Seperti janji zoel kemarin, hari ini zoel akan memberikan trik cara membuat navigasi breadcrumb di blogger, seperti yang sudah saya posting sebelumnya (baca : manfaat breadcrumb) bahwa baik sekali manfaat breadcrumb di mata google. Breadcrumb merupakan suatu petunjuk / jejak pengunjung sampai pada halaman artikel yang dia datangi.

Coba perhatikan tampilan breadcrumb seperti ini :

Browse » Home » tutorial blog » Domain .co.cc bisa diakses tanpa WWW

@ tutorial blog = ini merupakan nama label dari postingan tersebut
@ Domain .co.cc bisa diakses tanpa WWW = ini adalah judul postingan dimana pengunjung sedang berada.

Biasanya letak breadcrumb berada di atas judul postingan (bukan dihalaman utama).

Untuk yang belum pasang breadcrumb, langkah pembuatan breadcrumb :

1. login blogger
2. Design - edit HTML
3. centang kotak kecil (checkbox) bertuliskan expand widget template (tunggu beberapa detik)

4. Sekarang cari kode <div class='post hentry uncustomized-post-template'> (untuk memudahkan pencarian gunakan ctrl+f dan masukkan kode tersebut)

5. pastekan kode dibawah ini, tepat dibawahnya kode tadi :

<b:if cond='data:blog.pageType == "item"'>
<a href='http://namablog.blogspot.com/'>Home</a> &#187;
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</b:if>

Save template dan selamat sobat sudah punya tampilan breadcrumb.