BreadCrumb (Navigation) diblogspot? Ini Cara Gampang Bikinnya

Halo kawan ..
Sekarang Kami Pusat Bikin PIN dot com kembali ingin berbagi TIPS & TRIK blogspot
tema yang selanjutnya kami akan Membahasa tentang

" BreadCrumb (Navigation) diblogspot? Ini Cara Gampang Bikinnya " 

buat kawan-kawan yang belum mengerti apa itu BreadCrumb bisa simak dibawah ini

BreadCrumb (Navigation) 
Breadcrumbs ialah urutan link (umumnya berada diatas judul posting) dari Home (homepage) hingga judul posting yang sedang dibaca, contohnya: “Home > Kategori > Judul Posting”,



Adapun Fungsi dari BreadCrumb :

• Menunjukkan lokasi atau path dari halaman web yang sekarang sedang dikunjungi, relatif terhadap struktur halaman di atasnya.
• Menyediakan fitur one-click access ke level halaman web di atasnya sekaligus menghindari user tersesat karena terlalu dalam menjelajahi website.

Breadcrumb ini sangat bermanfaat bagi pengunjung tatkala struktur website yang kita bangun memiliki hirarki atau tingkatan.
Macam-macam model yang biasanya dipakai dalam membuat breadcrumb adalah seperti berikut.



1. Horizontal
Model ini yang sudah biasa dipakai para blogger, karena cenderung hemat tempat dan strukturnya lebih mudah dipahami.


2. Vertikal
Model yang ini agak memerlukan space yang lebih banyak tetapi tetap banyak yang menggunakannya.





3. Kombinasi horizontal dan vertikal
Walaupun tidak banyak, memasang breadcrumb dengan kombinasi horizontal dan vertikal juga masih ada.


Dan  Cara Gampang Bikin Breadcrum di Blogspot bisa kawan langsung lihat dibawah ini .. gampang ko

1. Login ke blogger degan ID anda.
2. Klik Tata Letak / layout
3. Kemudian klik tab Edit HTML
4. Click Download Full Template and please back up your template first. Untuk menghindari bila sewaktu-waktu ada kesalahan.
5. Beri tanda centang pada kotak kecil di samping tulisan Expand Template Widget.

6. Cari kode ]]></b:skin>
7. 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 #e2e7b4;
}
.breadcrumbs a {
text-decoration:none;
color: #000000;
}

8. Silahkan cari kode berikut pada template anda :
<div class='post hentry'>

9. Copy lalu paste kode di bawah ini persis di bawah kode <div class='post hentry'>

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'><a expr:href='data:blog.homepageUrl'>Ganti Dengan Kata Kunci Utama Blog</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>

►Simpan/save dan silahkan lihat hasilnya
*Note : 1.)Kata Berwarna merah ganti dengan Kata Kunci Utama Blog atau pun Judul blog kawan sendiri

3.)dan Breadcrumb ini tidak akan muncul di Home Blog anda dan akan muncul saat anda membaca penuh artikel anda :D


Contoh bisa lihat dibawah ini

Selamat Mencoba Anda Pasti bisa..
Berbagi Bersama Sukses Bersama

Sumber : Sumber