Cara Membuat Breadcrumbs Navigasi

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.

Selamat Mencoba...

Description: Cara Membuat Breadcrumbs Navigasi Rating: 4.5 Reviewer: ridwan ItemReviewed: Cara Membuat Breadcrumbs Navigasi
Al
AhliWebs Updated at: 14.45

0 komentar:

Posting Komentar

Silahkan Berkomentar..!!!
Saya akan Mengahpus Komentar Yang Menggunakan Kata-kata Yang Dianggap Tidak Benar..!!!