Buat Breadcrumb Navigasi Blogspot Blogger

Apa itu Navigasi Breadcrumb?

Breadcrumb kalau diartikan adalah remah roti, merupakan bantuan navigasi yang digunakan dalam user interface sehingga memudahkan user dalam menjelajahi sebuah websites. Navigasi breadcrumb sendiri disarankan oleh Google dalam membuat navigasi yang baik.

Istilah Breadcrumb sendiri berasal dari jejak remah roti yang ditinggalkan oleh Hansel dan Gretel di dongeng populer.

Kegunaan Breadcrumb

Seperti yang dijelaskan sebelumnya, Breadcrumb memudahkan user untuk menjelajahi website. User tidak perlu menekan tombol back pada browser karena sudah tersedia di website dalam bentuk breadcrumb. seperti gambar di bawah ini :

Cara Membuat Breadcrumb Blogspot Blogger


Berikut adalah cara memasang breadcrumb bersumber dari tutorial navigasi breadcrumb Kang Rohman.

  • Silahkan login ke blogger degan ID anda.
  • Klik Tata Letak.
  • Klik tab Edit HTML
  • Klick Download Full Template and please back up your template first.
  • Silahkan beri tanda centang pada kotak kecil di samping tulisan Expand Template Widget.


  • Silahkan cari kode ]]></b:skin>

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 #cadaef;
}

  • Silahkan cari kode berikut pada template anda :

<div class='post hentry uncustomized-post-template'>


Copy lalu paste kode di bawah ini persis 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 Save Template.
  • Tunggu beberapa saat sampai template anda tersimpan.
  • Buka halaman blog anda, klik pada judul artikelnya. Silahkan lihat hasilnya.
  • Selesai.
Jika sudah maka akan terlihat seperti ini :



=====================================================================

Ternyata ada ►►► Alternatif Adsense Yang Bisa Dipasang Berbarengan Dengan Adsense Di Blog Indo

Lagi cari template blogger yang keren dan responsive? Yuk, lihat 70+ koleksi pilihan ane . . . ►►► Download template blogger gratis



=====================================================================

Buat Breadcrumb Navigasi Blogspot Blogger | Sealkazz MiZzu | 5
loading...

loading...

Terima kasih telah berkunjung di Buat Breadcrumb Navigasi Blogspot Blogger

Mendapat rating 4.5 Dari 10 ulasan

Sealkazz MiZzu

12 komentar :

Adit Mahameru mengatakan...

utk breadcumb lagi nyari yg tanda >> nya satu aja jadi >, gmn ya mas bro bikinnya?....ayo tutorial. Karena nurut info, tanda > lebih di sukai search engine...semisal google

Adit Mahameru mengatakan...

OOT : Tumben komentar bareng..kwkwkwkkww

kisah abu nawas mengatakan...

salam sob
thanks shareny

Serba Ter mengatakan...

Wah dapat ilmu baru.. makasih bos

Daun mengatakan...

ini khusus buat blogspot ya sob klo buat wp gimana bisa ngga..?

Salam

aremafood mengatakan...

nice inpo gan,.. :)

Sealkazz MiZzu mengatakan...

@Adit Mahameru : ahhh mitos itu, saya gak pernah denger Search Engine suka yang begituan. . . . untuk cara mengubahnya silahkan ke blog kang rohman selaku sumber artikel : http://kolom-tutorial.blogspot.com

@Daun : untuk WP menggunakan plug in

heru mengatakan...

wah nih yang saya cari,ijin pinjem ilmunya dulu

Chord Choosy mengatakan...

iya saya juga denger lambang > lbh si sukai.. tapi yang pntng lbh disukai lagi artikel yang belum prnh di posting..

ponselkom mengatakan...

nice info mas bro

PHOTOSHOPDASAR mengatakan...

Saya sudah pasang ini...
Thank bos....

Dunia Blog Dunia Persahabatan Tanpa Batas mengatakan...

kalo gak di expand bisa gak?