Fungsi Breadcrumb dan Cara Membuatnya

Kita masuk dalam pembahasan masalah Breadcrumb.Breadcrumb merupakan navigasi menu untuk mempermudah pengunjung untuk mencari lokasi dokumen dan kembali ke awal dengan mudah tanpa harus kembali ke Beranda/Home.Breadcrumb letaknya berada pada atas halaman blog atau tepatnya di bawah header

contoh breadcrumb :

Breadcrumbs biasanya muncul secara horizontal di bagian atas sebuah halaman web, biasanya ada di bawah judul atau header. Breadcrumbs menyediakan link penghubung kembali ke halaman sebelumnya setiap user menavigasi antar link untuk menuju ke halaman yang aktif atau halaman induk dari halaman yang aktif. Breadcrumbs memberikan jejak bagi pengguna untuk mengikuti kembali ke titik awal atau entri. Sebuah tanda yang lebih besar dari (>) sering berfungsi sebagai pemisah hirarki, meskipun dapat menggunakan simbol lainnya (seperti »atau>), serta beragam grafik.

Cukup pembahasan mengenai Breadcrumb, mari kita coba untuk memasangnya pada blog sobat.Saya telah menyiapkan beberapa scriptnya. =D

• Login ke blog sobat.
• Klik Template
• Klik Edit HTML dan centang Expand Widget Templates
• Cari code ]]></b:skin> (tekan Ctrl+f untuk mempercepat pencarian)
• Copy code di bawah ini lalu letakan tepat di atas code ]]></b:skin>

.breadcrumbs{
padding-left:10px;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}

• Cari code <b:includable id='post' var='post'> kemudian silahkan sobat copy paste script di bawah ini dan letakan di bawah code <b:includable id='post' var='post'>

<b:includable id='post' var='post'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Anda disini &#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>

• Save template 

Lihat kembali blog sobat apakah berhasil atau tidak.Lakukan berulang kali jika belum berhasil.
Selamat mencoba :D

Digital Areas