Cara Mudah Membuat Breadcrumb di Blogspot

Cara Mudah Membuat Breadcrumb di Blogspot

Tips membuat breadcrumb di blogspot dengan mudah tanpa ribet dan works tenan. Tapi sebelumnya kita kenali dulu apa itu breadcrumb dan apa fungsinya? Breadcumb adalah salah satu navigasi website atau blogspot yang sangat penting, mirip seperti menu tetapi cara kerjanya searah dan runtut mengikuti kehalaman mana pengunjung berhenti dalam arti breadcrumb selalu mulai dari hompage, kemudian kategori, sub kategori, tanggal sampai ke artikel yang dituju, ini memberitahu pengunjung sedang berada di website atau blog bagian mana dan memudahkan pengunjung dalam mengunjungi halaman yang pernah dikunjungi sebelumnya tanpa harus mulai dari homepage lagi.





Bagaimana, setelah melihat screen shoot diatas apakah sudah ada gambaran? pasti sudah ada yah, kalau ga ada, saya bingung juga mau jelasin seperti apa. :v Mungkin dengan praktik langung bisa lebih memudahkan pemahaman.

Ok, Begini langkah-langkahnya:

• Pastikan sudah masuk ke akun blogspot anda, jika belum monggo login dulu. :)
• Pilih menu "Template"
• Pilih "Edit Template"
• Cari kode ]]></b:skin>
• Kalo sudah ketemu, monggo copy script CSS dibawah ini, dan paste tepat diatas kode ]]></b:skin>

.breadcrumbs { margin:0; padding:5px 5px 5px 0; font-size:95%; line-height:1.4em; border-bottom:4px double #a0a0a0; }

• Kemudian cari kode <div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> Cari yang dibold saja untuk memudahkan pencarian, dan pilih yang pertama jika lebih dari 1. kodenya agak panjang karena saya menggunakan template bawaan blogspot mungkin di template lain berbeda, tapi yang di bold pasti ada kok. o ya, dalam mencari kode jangan lupa gunakan CTRL+F ya. :v
• Kalo sudah ketemu, monggo copy script CSS dibawah ini, dan paste tepat dibawah kode <div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> Browse &#187; <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='tag'><data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>

Tampilan breadcrumbnya tidak sama dengan yang digambar, karena itu hanya contoh saja. Agar sama seperti digambar agan harus berkreasi di bagian CSS nya saja. Dan akhir kata, demikian artikel Cara Mudah Membuat Breadcrumb di Blogspot kali ini, semoga bermanfaat.

Sumur :

• tipsntrickstenan
• MasKolis