Cara Membuat Breadcrumb Navigasi Di Blogger (Seri 1)

Pernahkah anda melihat deretan navigasi sederhana seperti tampilan di bawah ini, yang terletak di atas judul artikel yang kita baca?. Nah, navigasi seperti itu namanya breadcrumb-navigation, dengan menggunakan breadcrumb-navigation para pembaca dapat dengan mudah mengetahui posisi dari sebuah artikel yang sedang dibaca dan juga dapat mencari artikel dalam kategori yang sama.

Sebetulnya Untuk membuat breadcrumb-navigation ada beberapa cara, cara yang pertama adalah sebagai berikut :

- Log in ke Blogger dengan ID kita;
- Klik Tata Letak / Layout;
- Klik Tab Edit HTML;
- Klik Download Template Lengkap, dan silahkan kembali ke template semula;
- Tandai kotak Expand Template Widget;
- Cari kode ]]></b:skin> (untuk mudahnya tekan Ctrl + F, lalu copy paste kode ]]></b:skin>);
- Salin dan sisipkan (copy paste) kode di bawah ini, tepat 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;
}

- Cari kode berikut di template kita :
<div class='post hentry uncustomized-post-template'>

- Salin dan sisipkan (copy paste) kode di bawah ini, tepat 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 Simpan Template (tunggu beberapa saat sampai template kita tersimpan);
- Buka blog kita, klik judul artikel, dan lihat hasilnya;
- Selesai.

Untuk cara lainnya lihat Cara Membuat Breadcrumb Navigasi Di Blogger (Seri 2).

Selamat mencoba, semoga bermanfaat.

Artikel Terkait :