Cara Membuat Breadcumb Untuk Blog

Cara Membuat Breadcumb Navigasi Untuk Blog- di pertemuan kali ini saya ingin sedikit membahas tentang cara memasang breadcumb pada blogger atau blogspot, tutorial ini khusus sahabat yang "lagi belajar ngeblog"
Contoh breadcumb navigasi bisa anda lihat seperti gambar dibawah ini:

Breadcrumbs biasanya muncul secara horizontal di bagian atas sebuah halaman web atau lebih tepatnya diatas judul postingan, 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 suatu artikel.

Fungsi Breadcumb navigasi Selain membuat template blogger agar menjadi lebih seo friendly juga memberikan kemudahan bagi pengunjung untuk melihat kategori artikel yang sedang ia baca.

Langkah-langkah pemasangan breadcumb pada blog adalah sebagai berikut:
1. Masuklah terlebih dahulu ke akun blogger milik anda
2. Jika sudah kemudian Pilih Rancangan
3. Lalu Masuk Ke Edit Html
4. Kemudian Centang Expand Template Widget Terlebih dahulu
5 Jika sudah cari kode dibawah ini ,, untuk mempermudah gunakan ctrl+f
                  ]]></b:skin>
6. Langkah berikutnya , Tempatkan kode css berikut tepat diatas kode tadi

.breadcrumb {
padding:5px 5px 5px 0px;
margin: 0px 0px 10px 0px;
font-size:90%;
line-height: 1.2em;
border-bottom:3px double #e6e4e3;
}
7. Lalu cari kode berikut tepat dibawah kode diatas
           <b:includable id='post' var='post'>
8. Tempatkan kode berikut ini tepat dibawah kode diatas

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumb'>
<a expr:href='data:blog.homepageUrl' rel='tag'>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>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>
9. terakhir simpan template dan lihat hasilnya
Selesai,, kini blog anda telah dilengkapi dengan navigasi breadcumb, tak hanya tampil lebih menarik dan seo friendly breadcumb juga memiliki peran cukup penting sebagai salah satu cara agar postingan kita cepat terindeks oleh google>

.::Related Posts::.
 
Copyright © 2011. Cksclw blog . All Rights Reserved
Game Downloads | Software Downloads | Appstore for Android | Phones Accessories | Hardware Komputer| Google Adsense | Site Map
Template Design by o-om.com. Powered by blogger