Saturday, August 7, 2010

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

No comments:

Post a Comment