Cara Membuat Menu Navigasi Breadcrumb

Navigasi Breadcrumb merupakan menu navigasi yang muncul pada halaman web dan letaknya dibawah halaman header/diatas judul posting dan setelah judul posting, saya mendefenikan atau mengartikan seperti itu secara kasat mata. Dimana dapat kita ketahui Navigasi Breadcrumb menyediakan link kembali kehalaman sebelumnya atau halam utama. Dengan tanda seperti ini (>)

Contoh : Home/Beranda>Kategori>Judul Posting (Lihat DEMO)

Namun dengan demikian tanda seperti ini (>) dapat kita ubah bisa menjadi tanda berikut (<) ataupun seperti ini (>> dan <<), hmmm maksud dari tanda tersebut menunjukkan tanda navigasi penunjuk arah.

Fungsi dari menu navigasi breadcrumb adalah untuk memudahkan pengunjung menelusuri halaman blog, karena dengan navigasi breadcrumb dapat lebih mudah menavigasi link dan selain itu juga dapat mengoptimalkan halaman blog di Seacrh Engine Optimation (SEO). Jika anda mau memasang navigasi breadcrumb maka saya akan berikan trik membuatnya dibawah ini.

Pertama, Login ke akun blog blogger anda.

Kedua, Pilih Template..

Ketiga, Untuk Menjaga template anda, silahkan download dulu template, klik dawnload template lengkap yang berada pada samping pojok kanan.

Keempat, Klik Edit HTML, Lanjutkan, kemudian jangan lupa untuk Expand Template Widget.

Kelima, gunakan Ctrl F atau F3 cari kode ]]></b:skin> dan jika sudah menemukan letakkan kode berukut di atas kode ]]></b:skin>

.breadcrumbs {
padding:5px 5px 5px 0px;
margin:0px 0px 15px 0px;
font-size:90%;
line-height:1.4em;
border-bottom:1px double #e6e4e3;
}

Keenam, kemudian cari kode <div class='post hentry'> dan letakkan kode berikut ini tepat dibawahnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
<span class='Apple-style-span' style='font-family: Verdana, sans-serif;'><a expr:href='data:blog.homepageUrl'>Home</a></span><img alt='crumb blegedes' src='http://kraeng-francisco-tutorial.googlecode.com/files/Navigasicrumb.gif'/>
<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;'> &#187; </b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
<span class='Apple-style-span' style='font-family: Verdana, sans-serif;'>Home</span><img alt='crumb blegedes' src='http://kraeng-francisco-tutorial.googlecode.com/files/Navigasicrumb.gif'/> <a expr:href='data:blog.homepageUrl' rel='tag'> Home </a>
&#187; Archives for <data:blog.pageName/>
</div>
</b:if>

Ketujuh, Klik Pritinjau untuk melihat tidak terjadi eror saat edit template, jika sudah lansung klik Simpan Template.

Selamat Mencoba dan saya berharap tutorial ini dapat bermanfaat bagi semua yang membutuhkan. Trima Kasih.