Selasa, September 27, 2011

Cara Membuat Navigasi Breadcrumb

Kali ini icalcell akan berbagi lagi trik blogger kepada kawan-kawan blogger semua karena sudah lama rasanya tidak berbagi tutorial blog. Pada saat ini icalcell akan berbagi Cara Membuat Navigasi Breadcrumb atau Breadcrumb Navigation. Mungkin sudah banyak tersebar di search engine, tapi tidak ada salahnya icalcell membagikan sesuai cara yang digunakan untuk navigasi breadcrumb di blog ini (baca : Tutorial Blog).

Sebelum ke langkah pembuatan navigasi breadcrumb, icalcell akan menjelaskan fungsi dari navigasi breadcrumb ini, kenapa kita perlu membuatnya.
  1. Navigasi Breadcrumb akan membuat tampilan blog seolah-olah blog profesional.
  2. Visitor akan mudah menjangkau semua isi postingan blog dengan adanya navigasi breadcrumb, karena adanya pemberitahuan , bahwa dia saat ini berada pada posisi mana.
  3. Navigasi breadcrumb sendiri merupakan penjabaran label postingan, sehingga label postingan kemungkinan akan banyak diklik oleh visitor, dan akan memunculkan postingan menarik dengan label tertentu sehingga akan meningkatkan pageviews blog tentunya.
Contoh navigasi breadcrumb yang icalcell gunakan di blog ini (baca: Trik Gratisan)

Navigasi Breadcrumb
 Lalu sebenarnya navigasi breadcrumb ini apa sih??? Navigasi breadcrumb sendiri merupakan proses pengembangan dengan label setiap postingan, dengan adanya label, maka terciptalah suatu navigasi breadcrumb, dengan posisi label ke judul postingan tertentu. Jadi intinya setiap postingan harus ada labelnya minimal 1 label perpostingan, agar navigasi breadcrumb bisa tampil dengan sempurna.

Langkah pembuatan Navigasi Breadcrumb
  1. Login ke blog tentunya, langsung menuju ke halaman EDIT HTML , jangan lupa ceklist Expand Widget template.
  2. Cari kode yang mirip seperti ini.
    <div class='post hentry'>
  3. Kopi kode di bawah ini persis di bawah kode diatas
    <b:if cond='data:blog.pageType == &quot;item&quot;'><div align='left' style='border-bottom:1px solid #940F04;font-size:10px;'>You are here: <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='nofollow'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if> &#187; <data:blog.pageName/></div></b:if>
  4. Setelah itu preview dulu, kalau kesalahan pengeditan tidak terjadi baru di save pengaturannya
Penjelasan kode-kode
<b:if cond='data:blog.pageType == &quot;item&quot;'>
kode ini digunakan agar navigasi breadcrumb tidak muncul di halaman homepage, tapi hanya muncul di halaman ITEM atau halaman postingan.selengkapnya lihat Cara Mengatur Tampilan Blog
You are here:
ini merupakan penunjuk , bisa teman-teman ganti ke kata lain, misalnya Browse , anda sekarang berada di , dan lain-lain, silahkan buat seindah mungkin.
&#187;
kode yang ini hanyalah merupakan tanda panah dobel sebagai pemisah antara link home, label dan judul postingan yang terbuka.

Nah itulah sedikit Cara Membuat Navigasi Breadcrumb, selamat mencoba teman-teman blogger, semoga bermanfaat.

Artikel Terkait

Cara Membuat Navigasi Breadcrumb
4/ 5
Oleh

Berlangganan

Suka dengan artikel di atas? Silakan berlangganan gratis via email

2 komentar

22 Desember, 2011 04:35 delete

nyari sana sini....
rupany ad pula d blog banng ical
makasih bnyak bang infony

mdh2an dg masang breadcrumb, pageview sy naik scara perlahan dan pasti
:)

Reply
avatar