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.

23.19 0

Leave a Reply