Lima Langkah Membuat Navigasi Breadcrumb

Breadcrumb adalah bantuan navigasi yang digunakan untuk membantu pengunjung. Dengan memasang navigasi ini pengunjung blog dimungkinkan untuk melacak lokasi mereka dalam dokumen atau artikel blog.



Lima Langkah Membuat Navigasi Breadcrumb




Navigasi ini biasanya muncul horizontal di bagian atas sebuah halaman web, di bawah judul artikel atau postingan. Fungsi breadcrumbs memberikan jejak bagi pengunjung untuk mengikuti kembali ke titik awal entri.

Bisanya ditandai dengan sebuah tanda yang lebih besar dari (>) atau mesin terbang (>>) yang berfungsi sebagai pemisah hirarki, berikut langkahnya:

 1. Login ke Blogger >> Rancangan >> Edit HTML >> centang kotak Expand Template Widget

 2. Cari kode yang mirip dengan <div class='post hentry'> (untuk mempermudah, gunakan fungsi F3)

3. Setelah kode tersebut ketemu, letakkan kode berikut ini di bawahnya:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
<span class='Apple-style-span' style='font-family: Verdana, sans-serif;'>Your are here</span>
&#187; <a expr:href='data:blog.homepageUrl' rel='tag'>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>
&#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;'>Browse</span> &#187; <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
&#187; Archives for <data:blog.pageName/>
</div>
</b:if>

4. Jika sudah selesai simpan template. Selanjutnya, cari kode: ]]></b:skin> lalu di atasnya, letakkan kode berikut ini:  

.breadcrumbs {
 padding:8px 0px 10px 5px;
margin: 0px 0px 5px 0px;
font-size:88%;
border:1px double
#e6e4e3;
}

5. Simpan lagi dan lihat hasilnya. Semoga memberi bermanfaat dalam aktifitas blogging kamu. Senang bisa berbagi informasi dan pengetahuan ini.

*referensi: http://www.kucoba.com/2011/04/membuat-breadcrumb-versi-terbaru-tanpa.html

Posting Komentar

0 Komentar