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.

Meskipun sudah cukup banyak tutorial mengenai ini, tapi Saya hanya ingin menunjukkan bahwa ada satu cara yang lebih mudah untuk melakukan ini. Anda tidak perlu membongkar struktur template secara keseluruhan hanya untuk menambahkan elemen lain, biarkan JQuery yang mencarinya dan menyisipkan elemen-elemen yang kita butuhkan (dalam hal ini adalah tombol/pemicu panel):
Pertama-tama masuklah ke halaman editor HTML template Anda kemudian temukan kode ini:
]]></b:skin>
Salin kode ini dan letakkan di atasnya:

a.openpanel {
  display:block;
  clear:both;
  width:auto;
  padding:0px 0px;
  text-align:center;
  font-weight:bold;
  line-height:32px;
  background-color:#39f;
  color:white;
  text-decoration:none;
  margin:0px 0px;
  -webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
  box-shadow:0px 1px 1px rgba(0,0,0,0.2);
  position:relative;
}

a.openpanel em {
  width:0px;
  height:0px;
  display:block;
  position:absolute;
  top:15px;
  right:15px;
  border:6px solid transparent;
  border-top-color:white;
}

a.openpanel.active {background-color:#900;}

a.openpanel.active em {
  top:6px;
  border-color:transparent transparent white transparent;
}

div.paneline {
  height:0px;
  border-bottom:4px solid #39b;
}

div.hompiPanel {
  padding:10px 20px 20px;
  -webkit-box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
  -moz-box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
  box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
  margin:0px 0px !important;
}

Kemudian temukan kode ini:
</head>
Salin kode ini dan letakkan di atasnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
var panelSelector       = '#comments',
    openPanelText       = "Poskan Komentar",
    closePanelText      = "Tutup Komentar",
    slideDownPanelSpeed = 600,
    slideUpPanelSpeed   = 400;
//]]>
</script>
<script src='http://reader-download.googlecode.com/svn/trunk/blogger-slide-panel-comments.js' type='text/javascript'></script>

Klik Simpan Template.
Sudah, begitu saja.

---

Lebih Jauh Lagi

Berikut ini adalah isi dari script blogger-slide-panel-comments.js:

jQuery(function() {
    jQuery(panelSelector).hide()
        .addClass('hompiPanel')
            .before('<a class="openpanel" href="#">' + openPanelText + '<em></em></a>')
                .after('<div class="paneline"></div>');
    jQuery('a.openpanel').toggle(function() {
        jQuery(this).addClass('active').html(closePanelText + '<em></em>');
        jQuery('div.hompiPanel').slideDown(slideDownPanelSpeed);
        return false;
    }, function() {
        jQuery(this).removeClass('active').html(openPanelText + '<em></em>');
        jQuery('div.hompiPanel').slideUp(slideUpPanelSpeed);
        return false;
    });
});

Isinya sangat sedikit. Karena fungsi dari script ini memang hanya untuk mencari elemen #comments, kemudian setelah JQuery menemukannya maka dia akan menyisipkan elemen a.openpanel sebelum #comments dan elemen div.paneline setelah #comments:

jQuery(panelSelector).hide() // Menyembunyikan elemen panelSelector (dalam hal ini adalah "#comments")
    // Tambahkan class="hompiPanel" (untuk keperluan intimidasi)
    .addClass('hompiPanel')
     // Sisipkan elemen a.openpanel sebelum panelSelector
        .before('<a class="openpanel" href="#">' + openPanelText + '<em></em></a>')
      // Sisipkan elemen div.paneline setelah panelSelector (sekedar hiasan saja)
            .after('<div class="paneline"></div>');

Setelah itu barulah aksi animasi bisa dilakukan. Di sini Saya menggunakan event .toggle() :

jQuery('a.openpanel').toggle(function() {
    jQuery(this).addClass('active').html(closePanelText + '<em></em>');
    jQuery('div.hompiPanel').slideDown(slideDownPanelSpeed);
    return false;
}, function() {
    jQuery(this).removeClass('active').text(openPanelText + '<em></em>');
    jQuery('div.hompiPanel').slideUp(slideUpPanelSpeed);
    return false;
});

Tentukan label tombol pada saat panel tertutup pada variabel openPanelText, lalu tentukan juga label tombol saat panel sedang terbuka pada variabel closePanelText.
Tentukan kecepatan efek .slideDown() pada variabel slideDownPanelSpeed dan kecepatan efek .slideUp() pada variabel slideUpPanelSpeed.