X
X
X
Website Search®
X
Blog Archive®

❖ Navigasi Breadcrumb Melayang, Inovasi Sederhana untuk Tampilan yang lebih Astaganaga

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

Posting Komentar