Membuat Breadcrumb Inilah Caranya

Breadcrumb merupakan navigation yang biasanya terletak di atas atau di bawah halaman yang memungkinkan pengunjung menuju ke bagian sebuah halaman web / blog sebelumnya.
Contohnya seperti ini:

Browse » Home » Tutorial , Widget » Membuat Recent Posts Lebih Menarik Dengan BuzzBoost


Masing masing kata yang ada di breadcrumb merupakan link menuju ke bagianya masing-masing. Dengan breadcrumb akan memudahkan pengunjung bernavigasi dan dapat dengan mudah memetakan posisinya sedang berada di bagian kategori mana. Karena itu sangat di sarankan sebuah web atau blog menggunakan sistem navigasi breadcrumb ini.

Dengan sedikit modifikasi pada kode template, maka “breadcrumb-navigation” akan segera anda miliki. Berikut adalah caranya.

Silahkan login ke blogger degan ID anda.
Klik Tata Letak.
Klik tab Edit HTML
Click Download Full Template and please back up your template first.
Silahkan beri tanda centang pada kotak kecil di samping tulisan Expand Template Widget.


Silahkan cari kode ]]></b:skin>
Copy lalu paste kode di bawah ini persis di atas kode ]]></b:skin>

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

Silahkan cari kode berikut pada template anda :

<div class='post hentry uncustomized-post-template'>

Copy lalu paste kode di bawah ini persis di bawah kode <div class='post hentry uncustomized-post-template'>

<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>

Klik tombol Save Template.
Tunggu beberapa saat sampai template anda tersimpan.
Buka halaman blog anda, klik pada judul artikelnya. Silahkan lihat hasilnya.
Selesai.

Related Articles by Category