Rabu, 14 Desember 2011

Cara Membuat Navigasi Breadcrumb pada blog




Cara Membuat Navigasi Breadcrumb ( mengurutkan dari home - label - postingan )- Kali ini bekompas 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 bekompas membagikan sesuai cara yang digunakan untuk navigasi breadcrumb di blog ini (baca : Tutorial Blog).

Sebelum ke langkah pembuatan navigasi breadcrumb, bekompas 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  gunakan di blog (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
Nah itulah sedikit Cara Membuat Navigasi Breadcrumb, selamat mencoba teman-teman blogger, semoga bermanfaat. 
Next Prev home

0 komentar:

Posting Komentar

tutorial blogpengobatan tradisional