Regi_Adi
Navigasi Breadcrumb atau terkenal dengan bahasa Inggrisnya yaitu Breadcrumb Navigation merupakan navigasi yang terlihat cukup simple, tetapi memiliki kegunaan yang banyak di antaranya yaitu memudahkan pengunjung blog Anda mengetahui keberadaannya.Contoh navigasi breadcrumb bisa Anda lihat di atas judul tutorial ini. Itu merupakan navigasi breadcrumb yang biasanya Anda temui pada beberapa blog atau website termasuk blog Kumpulan Tutorial Ngeblog.
Cara membuatnya pun cukup mudah. Silakan ikuti langkah-langkah membuat navigasi breadcrumb berikut ini
Langkah 1
Login ke akun Blogger milik anda > Tata Letak >Edit HTML. Klik Download Full Template untuk membackup template blog Anda.
Catatan: Biasakan membackup template blog Anda sebelum mengedit HTML
Langkah 2
Beri tanda centang pada Expand Widget Templates. Copy kode CSS di bawah ini lalu paste tepat di atas kode ]]></b:skin>
.breadcrumbs{Ganti kata yang berwarna merah dengan kode warna sesuai keinginan Anda
padding:5px 5px 5px 0;
margin:0;
font-size: 90%;
line-height:1.4em;
border-bottom:1px solid black;
}
Ganti kata yang berwarna biru dengan ukuran font sesuai keinginan Anda
Langkah 3
Cari kode <div class='post hentry uncustomized-post-template'>
Copy kode di bawah ini lalu paste tepat di bawah kode <div class='post hentry uncustomized-post-template'>
<b:if cond='data:blog.pageType == "item"'>Ganti kata yang berwarna merah sesuai dengan keinginan Anda
<div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
» <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>
</div>
</b:if>
Langkah 4
Klik tombol Simpan. Setelah tersimpan, buka salah satu halaman artikel pada blog Anda.
Navigasi Breradcrumb telah terpasang tepat di atas judul artikel blog Anda.
Posted in 
35 Response to "Cara Membuat Navigasi Breadcrumb"
Brknjung sob, sip infox ny..dh ane praktekam tu..trims yo
wah mantap nih sob,,saya simpan dulu soalnya saya juga lagi ganti template
Mantap gan infonya...,
saya belum tau nih...
hihihihihihihi...
met pagi gan...
halo sobat,thanks atas kunjungannya,salam kenal ya. blognya udah saya follow,gak nolak kalau mau di follow balik.Hehehe. .
ane pernah nyoba kek gini kenapa ga bisa ya di template ane...sedih nice share sob
Wah iku aku belum mudeng.aku coba dulu nih kawan
Yang dimananya contoh hasilnya?Beranda » Tutorial Blogger » Cara Membuat Navigasi Breadcrumb :yang inikah?Sekalian tuker linknya kawan.sudah aku pasang
pakde jadi geli sendiri mengetahui istilah " breadcrumb navigator", karena itilah "breadcrunb" ditempat kerja pakde itu artinnya tepung roti untuk membuat roti coklat , roti ini sangat disukai para bule ( roti ini sperti roti tawar tanpa kulit cuman warnaya agak coklat)
mungkin saking sederhananya sehingga disebut breadcrumb
pake bekgron bisa gag ya..?
tHanks inFonya sObat..
tApi saya bElum ada niat ni untuk pasang navigasi breadsrumb...,,,.,.
thanks sob buat tutorialnya, ntar saya coba ^^
saya sudah pake, thank ya udah mampir, salam blogger.
@5274187092250106417.0
bisa Sob... tambahkan kode background... kode css-nya jadi seperti ini
.breadcrumbs{
background: kode warna;
padding:5px 5px 5px 0;
margin:0;
font-size: 90%;
line-height:1.4em;
border-bottom:1px solid black;
}
semoga membantu :)
Wah, info bagus nih......
Bisa nggak ya tambahain backroun di belakangnya.
Patut dicoba
Emang bener-bener seputar internet
Wah, baru tahu nih. Ternyata gitu ya!
Trims infonya, harus dicoba biar gak penasaran!
trims buat infonya ^^
saya dulu pernah kebingunangan bikin ini, tapi sekarang udah berhasil, makasih bro..
sori baru bisa mampir nih..
saya dulu pernah kebingunan bikin ini, tapi sekarang udah berhasil....
makasih infonya....
Wah lengkap nih ada html kodenya.Btw sampean krian mana?
Salam kenal.Tipsnya bagus
wew...mau backlink malah dapet ilmu :D pasang dulu ah...
link udah terpasang ya bos...
Kunjungan balasan, makasih sudah mampir di blog saya.
Met kenal... Nice info!
Makasi tipsnya sobat! Sangat bermanfaat.
Boleh dicoba neh....ilmu baru..!
keren tipsnya, patut dicoba
thanks ya infonya :)
Coba dulu ahhh... Thanks untuk tipsnya kawand...
Oiya, sekalian follow sob, biar dapat update terbarunya.
berkunjung malam neh... :-))
berkunjung.... :-)
mantap gan .... Thank infonya...,
Linknya sudah saya pasang...
silahkan di chek...
susaaaaaaaah gag nemuin kode class='post hentry uncustomized-post-template'> huuu ada alternatif ga nii??
wah gw coba dulu deh
Posting Komentar
Silakan menyampaikan kritik, saran dan komentar.