Cara Membuat Navigasi Breadcrumb

Breadcrumb NavigationNavigasi 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{
padding:5px 5px 5px 0;
margin:0;
font-size: 90%;
line-height:1.4em;
border-bottom:1px solid black;
}
Ganti kata yang berwarna merah dengan kode warna sesuai keinginan Anda
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 == &quot;item&quot;'>
<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 == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>
</div>
</b:if>
Ganti kata yang berwarna merah sesuai dengan keinginan Anda

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.

Artikel Terkait



Berlangganan


Tulis alamat email Anda untuk berlangganan artikel terbaru dari blog ini:

Delivered by FeedBurner

35 Response to "Cara Membuat Navigasi Breadcrumb"

Ratasoe mengatakan...

Brknjung sob, sip infox ny..dh ane praktekam tu..trims yo

berita untuk negri mengatakan...

wah mantap nih sob,,saya simpan dulu soalnya saya juga lagi ganti template

Daftar Blogger Indonesia mengatakan...

Mantap gan infonya...,
saya belum tau nih...
hihihihihihihi...
met pagi gan...

Sou Stalker mengatakan...

halo sobat,thanks atas kunjungannya,salam kenal ya. blognya udah saya follow,gak nolak kalau mau di follow balik.Hehehe. .

netmild mengatakan...

ane pernah nyoba kek gini kenapa ga bisa ya di template ane...sedih nice share sob

tomo mengatakan...

Wah iku aku belum mudeng.aku coba dulu nih kawan

uswah mengatakan...

Yang dimananya contoh hasilnya?Beranda » Tutorial Blogger » Cara Membuat Navigasi Breadcrumb :yang inikah?Sekalian tuker linknya kawan.sudah aku pasang

pakde sulas mengatakan...

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

kakve_santi mengatakan...

pake bekgron bisa gag ya..?

Ngeposting ni yee mengatakan...

tHanks inFonya sObat..
tApi saya bElum ada niat ni untuk pasang navigasi breadsrumb...,,,.,.

megi mengatakan...

thanks sob buat tutorialnya, ntar saya coba ^^

Planet Jingga mengatakan...

saya sudah pake, thank ya udah mampir, salam blogger.

Seputar-Internet mengatakan...

@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 :)

world-musiclyrics mengatakan...

Wah, info bagus nih......

Gema Nasyid mengatakan...

Bisa nggak ya tambahain backroun di belakangnya.

Hiv-Aids n Young mengatakan...

Patut dicoba

Indonesia Blog Teens mengatakan...

Emang bener-bener seputar internet

Tips-Trik mengatakan...

Wah, baru tahu nih. Ternyata gitu ya!

nuansa pena mengatakan...

Trims infonya, harus dicoba biar gak penasaran!

Clara mengatakan...

trims buat infonya ^^

rizal mengatakan...

saya dulu pernah kebingunangan bikin ini, tapi sekarang udah berhasil, makasih bro..

sori baru bisa mampir nih..

rizal mengatakan...

saya dulu pernah kebingunan bikin ini, tapi sekarang udah berhasil....

makasih infonya....

TOMO mengatakan...

Wah lengkap nih ada html kodenya.Btw sampean krian mana?

uswah mengatakan...

Salam kenal.Tipsnya bagus

adilla mengatakan...

wew...mau backlink malah dapet ilmu :D pasang dulu ah...
link udah terpasang ya bos...

Pingin Ngeblog mengatakan...

Kunjungan balasan, makasih sudah mampir di blog saya.

Met kenal... Nice info!

Artikel Komputer mengatakan...

Makasi tipsnya sobat! Sangat bermanfaat.

PRof mengatakan...

Boleh dicoba neh....ilmu baru..!

agung ap mengatakan...

keren tipsnya, patut dicoba
thanks ya infonya :)

Rock mengatakan...

Coba dulu ahhh... Thanks untuk tipsnya kawand...

Oiya, sekalian follow sob, biar dapat update terbarunya.

buwel mengatakan...

berkunjung malam neh... :-))

achen mengatakan...

berkunjung.... :-)

Radhitya Notes mengatakan...

mantap gan .... Thank infonya...,
Linknya sudah saya pasang...
silahkan di chek...

Joni-Joni-Joni mengatakan...

susaaaaaaaah gag nemuin kode class='post hentry uncustomized-post-template'> huuu ada alternatif ga nii??

Barang Unik mengatakan...

wah gw coba dulu deh

Poskan Komentar

Silakan menyampaikan kritik, saran dan komentar.