Tutorial Membuat Navigasi Breadcrumb mungkin untuk sebagian kalangan (master template) akan terdengar sebagai 'Tutorial Gak Mutu' atau minimal akan menyampaikan 'Teknik Basi Ini'.
Namun tak sedikit pula orang, yang masih belum sepenuhnya mengerti Apa Itu Breadcrumb, apalagi Teknik Membuatnya, hehe.
Nah, untuk itulah (walaupun jadul) tapi disini saya akan mencoba menerangkan dari pertama mulai dari Apa Yang Dimaksud melaluiataubersamaini Breadcrumb, Fungsi Utama Dari Breadcrumb dan yang terakhir Bagaimana Teknik Membuat Breadcrumb.
Langsung saja yang pertama adalah.
Pengertian Breadcrumb
Breadcrumb adalah kata yang berasal dari Bahasa Inggris yang jikalau diartikan akan memiliki arti Roti Repih (roti renyah).
Serius woy ? yaelah, artiin sendiri lah pakai kalkulator atau apa sajalah kalau gak percaya.
Itu kalau diartiin secara harfiah, namun bahwasanya yang dimaksud dengan Breadcrumb bukanlah 'roti renyah' melainkan The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale (wikipedia).
Intinya kata Breadcrumb (trail) diambil dari Dongeng Hansel dan Gretel (kalau gak salah artiin). Pernah dengar dongengnya ? jikalau belum, berarti kita sama haha.
[ SERIUS ] Lalu menyerupai apa wujud dari Breadcrumb ini ? ya, biasanya berbentuk menyerupai hidangan navigasi (horisontal).
Bedanya jikalau pada Menu Navigasi, antar menunya, dipisahkan dengan Vertical Bar ( | ) atau dengan garis tegak lurus (gambar atau css) beda lagi kalau di Breadcrumb yang (biasanya) dipisahkan dengan tanda lebih dari ( > ) atau ada juga yang memakai glype ( » atau › ) menyerupai template keren mas sugeng ini.
Dan penampakannya kurang lebih menyerupai ini.
 |
| misal Breadcrumbs Blogspot |
Fungsi Utama Dari Breadcrumb
Selanjutnya kita masuk pada Fungsi dari Breadcrumb. Apa sajakah Fungsinya ?
- Memdiberi Tahu, Sedang Dimana Aku
Sering resah kan kalau sedang membaca artikel atau post di Blogspot (tema mobile bawaan) memakai Handphone ?
Pasalnya tidak ada 'peta' yang menandakan dimana kita ? atau sedang membaca artikel di kategori apakah kita ? dan disusul seribu pertanyaan lainnya.
Untuk mengatasi hal tersebut diciptakanlah Breadcrumb untuk Mengatasi Masalah Tanpa Solusi (ilk style). - Menambah Nilai SEO Pada Blog
Lucu ? memang terdengar lucu. Tapi ini faktanya, sebagian Blogger sudah membuktikan kedahsyatan dari Breadcrumb ini, namun akungnya blog berguruseo.blogspot.com belum sempat mencicipi manisnya dampak Breadcrumb untuk SEO.
Karena apa ? alasannya untuk mencicipi kedahsyatan dampak dari Breadcrumb ini pasalnya Blog kita minimal harus memiliki PageRank diatas 3 (atau minimal 3). Baru, setelah itu Navigasi Breadcrumb pada Blog kita sanggup tercium (terindeks) oleh mbah Google (aku baca dari blogjuragan).
Teknik cepatdangampang Membuat Breadcrumb
Penjelasan terakhir yang mungkin sudah ditunggu-tunggu (pd) hehe.
Hal yang perlu anda perhatikan Sebelum membuat Breadcrumb yakni penamaan label yan tertata pada setiap artikel Anda.
misal :
Home › Label Utama › Sub Label Utama › Judul Artikel
Jadi, disini saya masukankan untuk mempersembahkan dua label dalam satu artikel (jika memungkinkan).
Karena apa ? alasannya untuk menspesifikkan kategori dalam artikel Anda (ini tidak wajib, optional).
Sesudah tiruana artikel sudah didiberi label yang tertata, saatnya menambahkan Breadcrumb, caranya.
- Log in ke akun Blogger Anda.
- Masuk ke Menu Tata Letak atau Layout dan pilih Edit HTML.
- Centang goresan pena Expand Widget Templates
Fungsinya untuk membuka setiap atribut atau elemen dari css (jadi keliatan tiruana). - Cari instruksi <b:if cond='data:post.title'>
Gunakan CTRL + F untuk mempergampang Anda dalam mencari instruksi tersebut. - Lalu, Tambahkan Kode Berikut Tepat di Bawahnya
Script Untuk Membuat Breadcrumb <b:if cond='data:blog.pageType == "item"'> <a href=' http://namablog.blogspot.com/'>Home</ a> » <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> » </b:if> <data:post.title/> </b:if>
Sedikit klarifikasi untuk instruksi diatas, pada setiap label akan dipisahkan dengan tanda » (encrypt) atau » (decrypt).
Kaprikornus jikalau Anda ingin memdiberi symbol tidak sama atau gambar selalipun pada Breadcrumb tersebut. Maka Anda bisa mengganti instruksi » dengan symbol atau gambar yang Anda inginkan.
Jika ingin mengubah Backgrundnya lebih praktis lagi, Anda tinggal memasukan skrip Breadcrumb diatas dan membungkusnya dengan DIV, kemudian diberikan id atau class pada DIV tersebut dan selanjutnya silahkan di atur CSSnya sesuka Anda.
misal :
Memdiberikan DIV Pada Breadcrumb <div class="namaclass">kode atau skrip breadcrumb tadi</div>
cepatdangampang kan dalam Membuat ataupun Mengedit Breadcrumbs ? perlu Anda ketahui, spesialuntuk dengan Menambahkan atau Membuat Navigasi Breadcrumb (yang palin simple sekalipun) pada suatu Blog, tentunya ini akan menimbulkan sebuah Template Menjadi SEO Friendly, alasannya bisa memdiberi Navigasi yang terang Untuk Pengunjung.
Selanjutnya silahkan kembangkan lagi, dengan kreatifitas Anda masing-masing, dan Semoga Berhasil.
Tag :
Blogger Tips
0 Komentar untuk "Cara Gampang Menciptakan Navigasi Breadcrumb"