Mecha versi 2.6.4 sudah dirilis!

Navigasi Breadcrumb Melayang, Inovasi Sederhana untuk Tampilan yang lebih Astaganaga

Tabel Konten
  1. Sedikit Penyesuaian: 

Floating Breadcrumb Melayang

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 == &quot;item&quot;'> 
    <div class='alaihumcrumb'> 
        <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187; 
        <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 != &quot;true&quot;'> &#187; </b:if> 
            </b:loop> 
        </b:if> &#187; <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 dengan Home 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??

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

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?? :'(

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 :)

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@

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...... :( :( :(

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:

<span class='kanan'>
<a href='#'>Beranda</a> |
<a href='#'>Komentar</a> |
<a href='#'>Arsip</a>
</span>

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:

<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;

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

Komentar telah ditutup.