Cara Membuat Breadcrumbs Navigasi

Jika anda sering mengunjungi Kolom Tutorial, pasti tidak asing lagi dengan navigasi dibawah ini.

 

Yup. Itu namanya Breadcrumbs Navigasi. Nah, navigasi Breadcrumbs ini berguna untuk menaikkan posisi blog di Search Engine. Dengan kata lain, navigasi ini menguntungkan di sisi SEO.

Untuk membuatnya, pertama-tama login dulu ke Blogger, lalu klik Tata Letak lalu Edit HTML. Sebaiknya backup dulu template anda. Caranya klik Download Template Lengkap lalu tunggu hingga proses download selesai.

Nah, lalu aktifkan tanda centang pada Expand Template Widget.

Kalau sudah melakukan semua langkah-langkah diatas, lakukan langkah-langkah berikut ini.

1. Cari kode berikut ini.

]]></b:skin>

2. Copy kode ini diatasnya.

#breadcrumbs-navigasi{
padding:0px 10px 10px 0;
margin:0;
border-bottom:1px solid #ffff66;
}

Kode #ffff66 adalah warna border. Gati sesuai keinginan anda.

3. Cari kode berikut ini.

<b:if cond='data:post.dateHeader'>

4. Copy kode ini diatasnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='breadcrumbs-navigasi'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> | <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> | <a expr:href='data:post.url'><data:post.title/></a>
</div>
</b:if>

5. Simpan Template.

Nah, jika berhasil, tampilan breadcrumbs navigasi akan seperti berikut ini.

Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Artikel Menarik Lainnya