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
32 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
By Bukit ampai, at Wednesday, July 6, 2011 at 11:35:00 PM GMT+7
wwwwwwwwwwwwwuiiiihh... mantep suhu.. emang kesurupan jin coding ni yang punya blog, pasang deh -_-"
By Andi AF Studio, at Tuesday, August 23, 2011 at 9:20:00 AM GMT+7
kesana kemari nyari kode breadcumb gga da yang bisa di pasang , , tag coba dulu ya punya mas. ..
By Bayu, at Monday, September 5, 2011 at 8:43:00 PM GMT+7
mas klo breadcumb pasangnya di atas postingan gmana caranya??
By Anonymous, at Tuesday, April 3, 2012 at 12:49:00 PM GMT+7
@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
By Taufik Nurrohman, at Tuesday, April 3, 2012 at 10:36:00 PM GMT+7
izin pake \o/
By Dode Van Persie, at Monday, April 9, 2012 at 2:56:00 PM GMT+7
MANTAP UDAH AKU PRAKTEKAN :)
By Unknown, at Saturday, April 14, 2012 at 9:18:00 AM GMT+7
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
By Unknown, at Monday, April 16, 2012 at 6:23:00 AM GMT+7
@Luthfi All Iya, kalau di sini Saya menggunakannya untuk menaruh link terjemahan (di sebelah kanan atas) ^:D
By Taufik Nurrohman, at Monday, April 16, 2012 at 8:05:00 AM GMT+7
@Taufik Nurrohman kok saya ngk muncul ya ?
By JKT48IDFans, at Friday, May 11, 2012 at 10:25:00 PM GMT+7
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?? :'(
By Putra, at Sunday, May 27, 2012 at 1:30:00 PM GMT+7
@Alam Perwira Bungkus elemen <data:post.title/> dengan tautan:
<a expr:href='data:post.url'><data:post.title/></a>
By Taufik Nurrohman, at Sunday, May 27, 2012 at 2:26:00 PM GMT+7
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 :)
By Gara Pratama, at Wednesday, July 4, 2012 at 11:16:00 AM GMT+7
@Gararpas Membuat Navigasi Halaman Blogspot Melayang :-bd
By Taufik Nurrohman, at Sunday, July 8, 2012 at 1:41:00 PM GMT+7
wooh, makasih mas, manfaat dah :)
akhirnya nemu juga, sekali lagi makasih :D
By Gara Pratama, at Sunday, July 8, 2012 at 2:14:00 PM GMT+7
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@
By Gara Pratama, at Sunday, July 8, 2012 at 2:58:00 PM GMT+7
@Gararpas Sabar... diobrak-abrik dulu kodenya sambil googling.
By Taufik Nurrohman, at Sunday, July 8, 2012 at 3:41:00 PM GMT+7
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...... :( :( :(
By Anonymous, at Friday, July 13, 2012 at 6:50:00 PM GMT+7
@Limit Post Itu hasil modifikasi dari navigasi breadcrumb versi SEO Friendly (katanya) ⇒ https://www.google.com/search?q=navigasi+breadcrumb+seo+friendly+blogspot
By Taufik Nurrohman, at Friday, July 13, 2012 at 9:14:00 PM GMT+7
katanya ya **p
By Anonymous, at Friday, July 13, 2012 at 9:34:00 PM GMT+7
assalamu alaykum mas,, gima caranya menempatkan konten2 seperti komentar,arsip di " Konten Lain di Sini"..seperti punya bang jasri http://blog-jasri.blogspot.com
By Fathurrohman, at Sunday, September 2, 2012 at 4:29:00 PM GMT+7
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>
By Taufik Nurrohman, at Sunday, September 2, 2012 at 4:45:00 PM GMT+7
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
By Fathurrohman, at Monday, September 3, 2012 at 1:18:00 AM GMT+7
Hehe. Belajar mandiri mas :)
By Taufik Nurrohman, at Monday, September 3, 2012 at 9:01:00 AM GMT+7
haduh,,,saya masii pemula mas...
masii banyak nyontek dr blog2 orang...hehhe
By Fathurrohman, at Monday, September 3, 2012 at 6:11:00 PM GMT+7
bang taufik saya mau tanya,di blog saya ardhi-share.blogspot.com karena posisi breadcrumb itu header blog jadi agak ketutup, solusinya gimana bang??
By Unknown, at Monday, September 10, 2012 at 9:32:00 PM GMT+7
maaf bang, header nya udah bener, tapi yang tanggal sama jamnya masih ketutup bang, tolong dicek
By Unknown, at Monday, September 10, 2012 at 9:50:00 PM GMT+7
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;
By Taufik Nurrohman, at Tuesday, September 11, 2012 at 10:18:00 AM GMT+7
maaf`numpang tanya nih..!!
kalau Beranda di bkin link buka gini data:blog.homepageUrl gimna ngerubah codenya? mksih..
By azewdsignet, at Monday, December 24, 2012 at 9:19:00 PM GMT+7
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
By Unknown, at Friday, December 28, 2012 at 1:23:00 PM GMT+7
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.
By Taufik Nurrohman, at Monday, December 31, 2012 at 9:32:00 PM GMT+7
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
By Rizal Nurhidayat, at Tuesday, February 5, 2013 at 4:53:00 PM GMT+7
Post a Comment
<< Home