Navigasi Breadcrumb Melayang, Inovasi Sederhana untuk Tampilan yang lebih Astaganaga
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>
Labels: Desain
33 Comments:
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
wwwwwwwwwwwwwuiiiihh... mantep suhu.. emang kesurupan jin coding ni yang punya blog, pasang deh -_-"
kesana kemari nyari kode breadcumb gga da yang bisa di pasang , , tag coba dulu ya punya mas. ..
mas klo breadcumb pasangnya di atas postingan gmana caranya??
@miretahutempe Hehe... teringat kembali masa-masa pertama Saya membuat blog ini, saat Saya masih menggunakan font Trebuchet MS dan pada akhirnya berpindah ke Ubuntu :Ozz Cari di Google banyak kok:
Hasil penelusuran Google: https://www.google.co.id/search?q=membuat+navigasi+breadcrumb+blogspot
izin pake \o/
MANTAP UDAH AKU PRAKTEKAN :)
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
@Luthfi All Iya, kalau di sini Saya menggunakannya untuk menaruh link terjemahan (di sebelah kanan atas) ^:D
@Taufik Nurrohman kok saya ngk muncul ya ?
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?? :'(
@Alam Perwira Bungkus elemen <data:post.title/> dengan tautan:
<a expr:href='data:post.url'><data:post.title/></a>
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 :)
@Gararpas Membuat Navigasi Halaman Blogspot Melayang :-bd
wooh, makasih mas, manfaat dah :)
akhirnya nemu juga, sekali lagi makasih :D
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@
@Gararpas Sabar... diobrak-abrik dulu kodenya sambil googling.
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...... :( :( :(
@Limit Post Itu hasil modifikasi dari navigasi breadcrumb versi SEO Friendly (katanya) ⇒ https://www.google.com/search?q=navigasi+breadcrumb+seo+friendly+blogspot
katanya ya **p
assalamu alaykum mas,, gima caranya menempatkan konten2 seperti komentar,arsip di " Konten Lain di Sini"..seperti punya bang jasri http://blog-jasri.blogspot.com
Waalaikum salam. Ini contoh cara menyisipkan daftar link di bagian span.kanan:
<span class='kanan'>
<a href='#'>Beranda</a> |
<a href='#'>Komentar</a> |
<a href='#'>Arsip</a>
</span>
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
Hehe. Belajar mandiri mas :)
haduh,,,saya masii pemula mas...
masii banyak nyontek dr blog2 orang...hehhe
bang taufik saya mau tanya,di blog saya ardhi-share.blogspot.com karena posisi breadcrumb itu header blog jadi agak ketutup, solusinya gimana bang??
maaf bang, header nya udah bener, tapi yang tanggal sama jamnya masih ketutup bang, tolong dicek
Pada bagian ini:
<div style="float:right;color:#bbb;font:normal 15px tahoma;overflow:hidden;position:absolute;text-align:center;right:20%;top:1%;border-radius:3px;padding:6px;background:rgba(0,0,0,0.6);">
Tambahkan kode ini (di dalam atribut style):
margin-top:24px;
maaf`numpang tanya nih..!!
kalau Beranda di bkin link buka gini data:blog.homepageUrl gimna ngerubah codenya? mksih..
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
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.
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
Kalo Dibawah APa Kodenya
Post a Comment
<< Home