Cara Membuat Menu Navigasi Sederhana (Breadcrumb) di Blog
Bagi kebanyakan kita yang telah mahir ataupun sering membuat tulisan diblog, ataupun memodivikasi blog-nya, tentu sudah tidak asing lagi dengan judul diatas (Cara membuat menu navigasi sederhana (breadcrumb) di blog). Apalagi bagi beliau-beliau yang telah mahir di bidang blog, tentu hal ini sudah terdengar basi. Tapi tidak mengapa, saya mengarsipkannya sebagai tulisan di blog saya ini. Di blog yang masih terlihat kaku dan apa adanya ini.
Menu navigasi sederhana, yang sering dikenal dengan sebutan breadcrumb, merupakan suatu menu di blog yang memudahkan pengunjung untuk melihat posisi artikel yang sedang dibacanya serta mencari artikel lainnya dalam satu kategori di blog. Tips blog ini saya peroleh dari beberapa sumber, yang tentu saja telah mahir di bidang blog dan segala isinya.
Contoh menu navigasi sederhana seperti yang ada di blog saya ini. Pada saat kita masuk ke halaman utama, menu ini tidak terlihat di blog. Namun pada saat kita mengklik suatu judul, maka menu navigasi ini akan muncul diatas judul blog. Seperti yang terlihat di blog saya ini. Mohon klik salah satu judul, kemudian bisa kita perhatikan di atas judul blog ini akan ada menu-nya. Nah itulah menu sederhana di blog saya yang cara memasangnya seperti ini :
Jika berhasil, maka blog kita akan terlihat ilustrasinya seperti ini :
![]()
Referensi : Dari berbagai sumber
Menu navigasi sederhana, yang sering dikenal dengan sebutan breadcrumb, merupakan suatu menu di blog yang memudahkan pengunjung untuk melihat posisi artikel yang sedang dibacanya serta mencari artikel lainnya dalam satu kategori di blog. Tips blog ini saya peroleh dari beberapa sumber, yang tentu saja telah mahir di bidang blog dan segala isinya.
Contoh menu navigasi sederhana seperti yang ada di blog saya ini. Pada saat kita masuk ke halaman utama, menu ini tidak terlihat di blog. Namun pada saat kita mengklik suatu judul, maka menu navigasi ini akan muncul diatas judul blog. Seperti yang terlihat di blog saya ini. Mohon klik salah satu judul, kemudian bisa kita perhatikan di atas judul blog ini akan ada menu-nya. Nah itulah menu sederhana di blog saya yang cara memasangnya seperti ini :
- Masuk ke Tata Letak, kemudian pilih tab Edit HTML
- Kita bsa memback up dulu template blog kita sebelum melanjutkannya. Dengan mengklik Download Full Template tentunya.
- Kemudian beri tanda centang pada kotak kecil di samping tulisan Expand Template Widget.
- Kita cari kode ]]></b:skin>
- Copy-kan kode berikut di atas kode ]]></b:skin>
- Setelah itu, kita cari kode seperti dibawah ini :
- Kemudian copykan kode ini dibawah kode tersebut
- Simpan template kita
.breadcrumbs{
padding:5px 5px 5px 5px;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:3px double #DD0B0B;
}
padding:5px 5px 5px 5px;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:3px double #DD0B0B;
}
<div class='post hentry uncustomized-post-template'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Anda berada di » <a expr:href='data:blog.homepageUrl'>Halaman Muka</a> »
<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 != "true"'> , </b:if>
</b:loop>
</b:if> » <data:post.title/>
</div>
</b:if>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Anda berada di » <a expr:href='data:blog.homepageUrl'>Halaman Muka</a> »
<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 != "true"'> , </b:if>
</b:loop>
</b:if> » <data:post.title/>
</div>
</b:if>
</b:if>
Jika berhasil, maka blog kita akan terlihat ilustrasinya seperti ini :
Referensi : Dari berbagai sumber
Ok sobat linknya sudah dipasang silahkan di chek ya.. makasih
Salam kenal juga jeng hana .. linknya segera saya pasang ya
Yups sob.. blog saya dofollow nih
@Saung Web:
Terimakasih banyak sob, ntr saya cek. Lagi lambat loading ini jaringannya. Terimakasih banyak loh
@Link Tea:
Terimakasih mas ya, di tunggu, salam kenal juga mas
Blognya dofollow sob.. linknya segera saya masukan di dofollow blog community ,, agar visitor tahu blognya dofollow pasang logo dofollow comunitynya sob.. silahkan copas aja. trus agar orang seneng berkomentar.. kalau bisa formatnya ganti juga dengan yg pake Name/Url, jangan pake Account google atau OpenId .. semoga bisa membantu
Halah kalau komenntnya pake Open Id ribet amat mesti 7 kali klik tuh.. kalau koneksi lambat .. wah pada kabur yg mau koment juga sob.. hehe
@Linktea : Terimakasih sob, nanti saya copy logonya dan saya pasang di blog ini. Sarannya sudah saya laksanakan dengan mengubah format komentarnya, thanks sekali lagi sob
@Saungweb : Iya sob, sarannya bagus, sudah saya ubah kok biar kalo koneksi lambat tetap bisa berkunjung (halah..PD amat ya,hehe)
cocok sob blog q juga dah tak pasang, salam kenl juga
@Rizky2009:
Terimakasih sob kunjungan dan follow-nya, nanti saya follow balik ya
wah... bisa utak atik nie
thx for share ^^
kunjungan balik & sekalian follow yah ^^
@inge/cyber dreamer :
terimakasih mbak kunjungannya, iya saya follow balik ya mbak..
ok juga share infonya, thanks sobat.
btw... sebagai bentuk persahabatan link blognya udah nampang diblogq. sukses selalu n tetap semangat....
ha ha ha.... mana tepung rotinya? guyon guyon,, kadang kadang pakde juga heran dengan istilah istilah yang dipakai para blogger, seperti istilah bread crumb ini, kebetulan pelanggan pakde sering minta dibelikan ini untuk bahan membuat roti.
maju terus pantang mundur, buat posting asal manfaat jangan pedulikan blogger lain sudah buat yang penting kita buat dengan "kita punya gaya"
moga sukses selalu
@pakde sulas :
iya nih pakde, banyak istilah yang saya juga masih banyak belajar. Sarannya akan saya coba pakde, posting dengan gaya kita, tapi postingan saya diatas sudah dengan gaya saya kan?hehehe..
Saya ingin berusaha menjadi diri saya sendiri pakde, hehe..
Pokokna matur nuhun pakde
salam sobat
wah saya belum pernah buat navigasi ini mba Hanna.
trims sudah diberikan caranya.
bisa dicoba nanti.
@NURA :
Silahkan mbak, trimakasih kunjungannya mbak..
salam sobat
sip nich membuat menu navigator sederhana,,
saya nanti akan mencoba juga mba Hanna.
trims sudah berbagi ilmunya.
thx utk infonya, msh hrs dipelajari ilmunya, maklum msh newbie, salam kenal, http://www.bersediabelajar.blogspot.com
Salam, bro kenapa bread blog aku belum ke index m om google ya help me.Salam, bro kenapa bread blog aku belum ke index m om google ya help me.
kebetulan template saya blm ada dreadcrumb nya
ijin kopi kode nya ya sob
utk template blog saya..trimakasih
ijin sedot gan..hehe maklum baru belajar..
Saya coba praktekan dulu, terimakasih
I actually still cannot quite assume that I could always be one of those studying the important tips found on your site. My family and I are sincerely thankful for your generosity and for presenting me the chance to pursue my own chosen career path. Thanks for the important information I got from your web page.
updateterus gan info2 yg bermanfaatnya
terimakasih banyak
sukses terus
nice post gan
mantep nih informasinya
terimakasih banyak, sukses terus
Good artikel
baru kali ini nih gan aku ngebaca artikel yang sangat bagus,ditgu ya yg artikel selanjutnya..!!
Nice post gan, sangat membantu