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 == &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>