Cara Membuat Breadcrumb atau menu navigasi berurutan

apa itu breadcrumb ?
bahasanya emang agak susah diucapkan,
saya mengistilahkannya begini : Membuat menu navigasi berurutan di atas artikel posting, merupakan suatu cara efektif untuk memberikan kemudahan pengunjung blog dalam melihat kategori/label posting suatu blog.

jadi menu breadcrumb ini bekerja jika anda sudah mempunyai /membuat label.
dan menu navigasi breadcrumbs ini akan terlihat diatas artikel anda atau dibawah judul blog anda saat anda
membuka halaman suatu postingan bukan halaman utama blogspot anda.(contoh punya saya ini.)
oke langsung aja ya :

Langkah langkah/Cara Membuat Breadcrumb Pada Blogger

1. pergi ke Dashboard,lalu pilih Tata Letak dan kemudian pilih Edit HTML, jangan lupa centang tulisan     Expand Widget Templates.

2. Selanjutnya cari kode berikut (gunakan Ctrl+F pada keyboard anda untuk membantu pencarian):<b:includable id='main' var='top'>

3. Setelah ketemu,letakkan breadcrumb script berikut tepat diatasnya.

<b:includable id='breadcrumbs' var='post'>

<!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>

Browse:
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &gt;
<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>
</b:loop>
<b:if cond='data:post.title'>
&gt; <b><data:post.title/></b>
</b:if>
</b:if>
</span>
</p>
</b:if>
<!-- End of Breadcrums Hack -->
</b:includable>

4. Cari kode ]]></b:skin>,
jika sudah ketemu letakkan barisan kode css breadcrumb dibawah ini tepat diatasnya.

.breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}

5. Kemudian,cari lagi kode berikut:
     <b:if cond='data:post.dateHeader'>

6. Jika sudah ketemu, letakkan kode dibawah ini tepat diatasnya.
     <b:include data='post' name='breadcrumbs'/>

atau anda bisa sesuaikan dengan blog anda nanti dengan menaruh disekitar kode no 5. (coba deh ber eksperimen)

7. Kemudian Simpan Templates dan Selesai.

anda bisa ganti tulisan Browse (warna merah) sesuai selera anda, misalnya diganti  anda disini atau yang lainnya.

gampangkan

selamat mencoba...
thanks to hoctro

Related Post



25 komentar:

Imtikhan mengatakan...

salam persahabatan
artikel yang bagus kawan
lanjutkan!

Blog Tutorial Blogger mengatakan...

aku dah pasang kawan
makasih infonya ya

Smadav Pro 8.4 Terbaru mengatakan...

Uih mantap gan...

baru tau ane, ane mau coba nanti ah,,,

Tip Trik Facebook mengatakan...

info bagus kawan
terima kasih ya

Tip Trik Tip mengatakan...

tak simpan sob
terima kasih ya

meriahkan pesta ulang tahun bersama garudafood mengatakan...

mantap bngt info nya...makasih atas infonya sob

Man Rengat mengatakan...

<<< Ini Bukan SPAM Kawan >>>

hi sobat apa kabar? dah lama ne ane gak ada jalan ke sini.

Berhubung domain co.cc dibanned oleh Google dan blog ane salah satunya yang terkena imbasnya, maka ane memberitahukan ke sobat untuk mengganti alamat link ane di blog sobat, dan jika blog ane belum terpasang di sini mohon dipasang kembali karena blog sobat sudah lama terpasang di blog ane (Silahkan ceck).

Blog ane yang diganti linknya adalah :

semula blog ane yang beralamat http://www.manrengat.co.cc/ (dengan Ancor Text : Man Rengat / Tutorial Blog Terbaru) mohon diganti alamatnya dengan http://mankita.blogspot.com/.

Sekaligus ane pengen juga bertukar link sama sobat dengan blog baru ane yang lain, dan tentunya blog sobat juga sudah terpasang di blog ane tersebut.

Blog ane yang baru yaitu :

Blog Bahasa Indonesia :

Investasi SAHAM

Bisnis Forex

Cara Sukses

Blog Bahasa Inggris (Baru belajar Bahasa Ingris Sob, heheheh) :

NeGeri Technology

Lifestyle For you

Game Community

Mohon dipasang semua link blog ane, Code Link bisa sobat dapatkan dengan mengunjungi blog tersebut. Jika sobat keberatan untuk bertukar link dengan blog ane yang lain (Selain http://mankita.blogspot.com/), silahkan beritahu ane.

Sebelumnya ane minta maaf kawan, link blog ane banyak banget (Maklum kawan, ane pengen bunya banyak blog/website seperti master2 blog yang bisa digunakan untuk ladang $$ , hehehehe)

atas kerja samanya ane ucapkan terima kasih.

Gadget | Telephone Mobile mengatakan...

setelah dicoba gagal mulu mas cara diatas

Man Kita mengatakan...

Hello sobat setia,

saya memohon maaf karena ada perubahan pada Blog saya, bahwa daftar "Link sahabat" saya taruh di posting, bukan di Home page, maka silahkan sobat taruh Link blog saya di posting Link teman di blog sobat, Jika Link saya ditaruh di Home saya sangat berterima kasih. :)

saya tetap akan menjaga tali silatuhrahmi bersama sahabat, link tersebut dipindahkan dikarenakan oleh beberapa sebab.

Walaupun demikain besar harapan saya cuy, Link saya juga terpasang, walaupun di Postingan Khusus.

silahkan lihat cuy Link sobat di sini >> Link Sahabat MAN KITA

Obat Herbal Nyeri Sendi mengatakan...

lumayan banyak juga scripnya..
ntar saya copas yah...

Dediekusmayadi mengatakan...

Wah roti lemah (breadcrumb)hanya berlaku pada templates custom saja(download) kalau pada template bawaan blogger agak susah pakai situs parse html pun nggak bisa dan tidak semua template bisa lho mas?

Obat Herbal Keputihan mengatakan...

info nya keren sekali ..
mantapb.

Obat Tradisional Hiv Aids mengatakan...

terimakasih buat infonya!!!langsung belajar saja susah gak ya???semoga sukses dan salam kenal...

Obat Alami Nyeri Sendi mengatakan...

kalo liat kodenya ga ngerti deh gan , tapi tar lah dicoba dulu .
moga aja bisa .
makasih ya buat sharenya

Obat Tradisional Asam Urat mengatakan...

langkah yang bisa saya pelajari,thanks!!!

Obat Tradisional Darah Tinggi mengatakan...

cara yang efektif juga ya!!!salam kenal,saya langsung mencobanya.

bana mengatakan...

hallo sobat lama tak jumpa :D

Mahfud mengatakan...

wah, tipsnya bagus bnget nih.. :D
nyoba ah... :D

around business mengatakan...

thanks infonya.. ini artikel bagus...

Obat Herbal Kanker Paru Paru mengatakan...

Terimakasih banyak atas informasinya...!
salam kenal dan semoga sukses :)
langsung dicoba saja.

Risma mengatakan...

Terimakasih banyak atas informasinya..!
salam kenal dan semoga sukses :)

taruhan bola mengatakan...

breadcumb itu sebenarnya istilah dalam ilmu blog ya, gan??

Toko Wan Herbal mengatakan...

Nice Post..!
I like it's...

virtual pointer mengatakan...

artikelnya mantap, nice artikel

Cara Mengobati Herpes Pada Anak dan Dewasa mengatakan...

widiiiiih keren

Poskan Komentar

 
© 2009 membuat blog itu gampang | Powered by Blogger | Built on the Blogger Template Valid X/HTML (Just Home Page) | Design: Choen | PageNav: Abu Farhan