Navigasi Breadcrumb Melayang, Inovasi Sederhana untuk Tampilan yang lebih Astaganaga
Tabel Konten
Merasa bosan dengan tampilan navigasi breadcrumb yang begitu-begitu saja? Dengan memanfaatkan deklarasi position:fixed;
kita bisa membuat sebuah objek (dalam hal ini navigasi breadcrumb) menjadi melayang. Untuk membuatnya lakukan beberapa langkah berikut ini:
- Masuk ke tab Rancangan kemudian pilih Edit HTML. Cek Expand Template Widget agar seluruh elemen pembangun posting tampil.
- Salin kode pemodel di bawah ini, kemudian letakkan di atas kode
]]></b:skin>
atau</style>
:.alaihumcrumb { position:fixed; z-index:1000; top:0; left:0; background:#333; width:98%; color:#ccc; border-bottom:2px solid #999; padding:1px 1% 1px 1%; -webkit-box-shadow:0 0 7px #000; -moz-box-shadow:0 0 7px #000; box-shadow:0 0 7px #000; } .alaihumcrumb a, .alaihumcrumb a:visited, .alaihumcrumb a:active { color:#fff; } .alaihumcrumb span.kanan { float:right; }
- Kemudian carilah kode yang tampak seperti ini:
<a expr:name='data:post.id'/>
TIP: tekan CTRL + F kemudian ketik expr:name='data:post.id' untuk mempermudah pencarian.Salin kode di bawah ini, kemudian letakkan tepat di atas kode
<a expr:name='data:post.id'/>
:<b:if cond='data:blog.pageType == "item"'> <div class='alaihumcrumb'> <a expr:href='data:blog.homepageUrl'>Beranda</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/> <span class='kanan'> Konten Lain di Sini </span> </div> </b:if>
Dalam sebuah template blogspot terkadang terdapat satu atau dua buah kode<a expr:name='data:post.id'/>
. Jika apa yang telah kamu lakukan tidak menunjukkan hasil, cobalah untuk meletakkan kode tersebut di atas kode<a expr:name='data:post.id'/>
yang kamu temukan berikutnya. - Klik Simpan Template.
Sedikit Penyesuaian:
- Kamu bisa mengganti
Beranda
denganHome
atau yang lainnya. Letakkan juga konten lain seperti jam dinding, jumlah komentar, jumlah posting atau yang lainnya di dalam wilayah kekuasaan<span class='kanan'> ... </span>
33 Komentar
Unknown
Mantep mas, memudahkan navigasi.
Mas mau tanya sedikit nih, bagaimana ya supaya navigasi breadcrumb dideteksi google. Aku udah nyoba beberapa cara, tapi belum berhasil.. Blog tetangga ku PR 0 tapi udah dideteksi di SERP. Mohon penjelesannya
Andi AF Studio
wwwwwwwwwwwwwuiiiihh... mantep suhu.. emang kesurupan jin coding ni yang punya blog, pasang deh -_-"
Unknown
kesana kemari nyari kode breadcumb gga da yang bisa di pasang , , tag coba dulu ya punya mas. ..
Anonim
mas klo breadcumb pasangnya di atas postingan gmana caranya??
Taufik Nurrohman
@miretahutempe Hehe... teringat kembali masa-masa pertama Saya membuat blog ini, saat Saya masih menggunakan font
Trebuchet MS
dan pada akhirnya berpindah keUbuntu
:Ozz Cari di Google banyak kok:Hasil penelusuran Google: https://www.google.co.id/search?q=membuat+navigasi+breadcrumb+blogspot
Dode Van Persie
izin pake \o/
Unknown
MANTAP UDAH AKU PRAKTEKAN :)
Unknown
tuch diatas ada tulisan "Konten Lain di Sini"
maksudnya bisa ditambahin kode-kode kayak punya nya blog ini yaa kak blog-jasri.blogspot.com/2012/04/flying-dutchman.html ??
thanks
Taufik Nurrohman
@Luthfi All Iya, kalau di sini Saya menggunakannya untuk menaruh link terjemahan (di sebelah kanan atas) ^:D
JKT48IDFans
@Taufik Nurrohman kok saya ngk muncul ya ?
Putra
mas, saya coba gabungkan sama blog pager yang melayang, kok hasilnya begini? memorysite404.blogspot.com/
udah saya ganti warna breadcrumbsnya jadi putih, tp kok gak berubah? saya salah dimana yaa?? :'(
Taufik Nurrohman
@Alam Perwira Bungkus elemen
<data:post.title/>
dengan tautan:Unknown
mas, kalau dibuat untuk page gimana ya?
kaya di blog ini : orangeminimalist.blogspot.com
apa beda cara? mau nyari cara di google ga tau keyword nya.
tolong bantuannya mas :)
Taufik Nurrohman
@Gararpas Membuat Navigasi Halaman Blogspot Melayang :-bd
Unknown
wooh, makasih mas, manfaat dah :)
akhirnya nemu juga, sekali lagi makasih :D
Unknown
oh ya, mas cara ngasih tulisan
"beranda sitemap about dll" gimana yah di menunya
disitu cuma ada ikon beranda, cara menggantinya dan menambahkan page lagi gimana yah?
hehe maaf nanya lagi bingung soalnya x@
Taufik Nurrohman
@Gararpas Sabar... diobrak-abrik dulu kodenya sambil googling.
Anonim
mas mau nanya ini cuman tampil di bagian posting aja ya...
trus kalo breadcrumbnya bisa kemana-mana misal ke daftar isi punya mas taufik kan ada tuh diatasnya Beranda > daftar isi...
punya saya kok gak ada ya mas...... :( :( :(
Taufik Nurrohman
@Limit Post Itu hasil modifikasi dari navigasi breadcrumb versi SEO Friendly (katanya) ⇒ https://www.google.com/search?q=navigasi+breadcrumb+seo+friendly+blogspot
Anonim
katanya ya **p
Fathurrohman
assalamu alaykum mas,, gima caranya menempatkan konten2 seperti komentar,arsip di " Konten Lain di Sini"..seperti punya bang jasri http://blog-jasri.blogspot.com
Taufik Nurrohman
Waalaikum salam. Ini contoh cara menyisipkan daftar link di bagian
span.kanan
:Fathurrohman
mau tanya lagi mas,,kalo mau menempatkan tombol pop up komentar,,sama persis sama blognya mas jasri maupun urang kurai gimana ya mas...
mohon bantuannya mas,,saya lihat mas di http://hompimpaalaihumgambreng.blogspot.com/2012/02/popup-formulir-komentar-blog-dengan.html?showComment=1346455090379 ,mas bisa buatin blog mas The7Bloggers seperti itu...ini blog saya mas http://www.ibnarazy.com
Taufik Nurrohman
Hehe. Belajar mandiri mas :)
Fathurrohman
haduh,,,saya masii pemula mas...
masii banyak nyontek dr blog2 orang...hehhe
Unknown
bang taufik saya mau tanya,di blog saya ardhi-share.blogspot.com karena posisi breadcrumb itu header blog jadi agak ketutup, solusinya gimana bang??
Unknown
maaf bang, header nya udah bener, tapi yang tanggal sama jamnya masih ketutup bang, tolong dicek
Taufik Nurrohman
Pada bagian ini:
Tambahkan kode ini (di dalam atribut
style
):azewdsignet
maaf`numpang tanya nih..!!
kalau Beranda di bkin link buka gini data:blog.homepageUrl gimna ngerubah codenya? mksih..
Unknown
Kang mau nanya nih , kalo kode [<]a expr:name='data:post.id'/[>] tidak ada dalam template saya , apa ada kode Lain untuk menempatkan Kode Breadcrumb nya ? :-bd
Taufik Nurrohman
Sebenarnya elemen
fixed
tidak terlalu mementingkan posisi (ujung-ujungnya akan menempel di atas juga). Di taruh di atas tag<div class='post hentry'>
juga boleh.Rizal Nurhidayat
Makasih banyak sobh... ane banyak belajar dari tutorial ini... dan sekarang ane bisa modifikasi breadcrumbs di blog ane... kunjungi juga http://coretan-coretanmaut-rizal.blogspot.com/... sekali lagi makasih sobh... :-bd
Unknown
Kalo Dibawah APa Kodenya