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

  • Taufik Nurrohman

    @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

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

    <a expr:href='data:post.url'><data:post.title/></a>
  • 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

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

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