Kali ini saya ingin berbagi cara untuk membuat breadcrumb di blogger,mungkin kalian sudah familiar atau pernah dengar tentang breadcrumb.
Kalau menurut saya nih..
Breadcrumb adalah menu navigasi yang memudahkan pembaca tentang alur artikel yang mereka baca, misalnya mereka membaca artikel "Cara diet sehat dengan Bandeng", maka di menu breadcrumb akan nampak label dan judul artikel.
Untuk lebih jelasnya kita lihat skrinsut nya
Nah penampakanya seperti pada gambar diatas.
Memang kelihatanya sih sederhana, tapi kalau menurut saya itu membuat tampilan blog kita makin cantik dan profesional.
Ada pendapat dari berbagai ulama di pelosok negeri yang menyatakan bahwa breadcrumb juga mempermudah search engine atau Google untuk mengenal alur dari artikel kita tadi, dan ujung2nya membuat blog kita lebih SEO friendly.
Sudah cukup ceramahnya ya...
Sekarang kita mulai membuatnya, mudah dan simpel kok tinggal ikuti bimbingan saya ini ( hehehe)
1. Pertama kita Sign in dulu di blog kita
2. Biasa, masuk menu "template" dan "edit Html" jangan lupa untuk centang "expand widget"
Kalo ada yang kesulitan mencari kode html, baca artikel yg judulnya cara edit kode html blog.
3. Kemudian cari kode ]]></b:skin> dan paste kan kode berikut DI ATASNYA
#breadcrumbs {padding:5px 5px 5px 0px;margin: 0px 0px 15px 0px;font-size:10px;line-height: 1.4em;border-bottom:1px dotted #CCCCCC;}
4. Lalu cari lagi kode <b:if cond='data:post.title'> , dan lagi2 pastekan kode berikut DI ATASNYA,Ada sebagian blog yang mempunyai kode <b:if cond='data:post.title'> lebih dari satu biji, kalau menurut hemat saya pastekan kode berikut di atas setiap kodenya
<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == "item"'> <div class='breadcrumbs'> Browse > <a expr:href='data:blog.homepageUrl'>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/></div> </b:if> </b:if>5. Klik " Simpan " , daaaan.... jadi deh breadcrumb nya
Oiya, menu breadcrumb ini hanya muncul di halaman post saja, jadi tidak muncul di homepage kita.
Nah sekian dulu mata kuliah hari ini dan semoga bermanfaat.
