Trik sembunyikan Navbar Blogger dg css3 transitionClick here to get more tutorials!

Dengan css3 transition, selain navbar hilang total dari pandangan dan body blogger benar-benar bisa mepet di bagian atas tanpa menyisakan sedikitpun ruang, navbar ini masih tetap bisa digunakan karena dengan sedikit sentuhan hover seluruh bagian navbar akan dimunculkan. Fixed position membuat munculnya navbar tak merubah tatanan blog. Bagian atas tetap rapat dan anda bisa menggunakan navbar sebagaimana layaknya navbar blogger.
Selain fungsi utamanya sebagai "penghilang navbar", css3 transition juga menciptakan animasi indah saat navbar muncul dan menghilang. Tentu saja hal ini akan membuat blog jadi semakin menarik.

D E M O

Arahkan cursor ke tanda panah di ujung kanan atas halaman blog!

Kode css animasi navbar blogger

.navbar,.navbar iframe{
      transition:width 2s 4s,height 0.5s 5s,background-color 5s,opacity 7s;
      -o-transition:width 2s 4s,height 0.5s 5s,background-color 5s,opacity 7s;
      -ms-transition:width 2s 4s,height 0.5s 5s,background-color 5s,opacity 7s;
      -moz-transition:width 2s 4s,height 0.5s 5s,background-color 5s,opacity 7s;
      -webkit-transition:width 2s 4s,height 0.5s 5s,background-color 5s,opacity 7s;
}
.navbar:hover,.navbar:hover iframe{
      transition:width 0.2s,height 0.5s 0.4s,background-color 2s,opacity 3s;
      -o-transition:width 0.2s,height 0.5s 0.4s,background-color 2s,opacity 3s;
      -ms-transition:width 0.2s,height 0.5s 0.4s,background-color 2s,opacity 3s;
      -moz-transition:width 0.2s,height 0.5s 0.4s,background-color 2s,opacity 3s;
      -webkit-transition:width 0.2s,height 0.5s 0.4s,background-color 2s,opacity 3s;
}
.navbar{
      width:50px;
      height:32px;
      position:fixed;
      top:0px;
      right:0;
      background:url(https://lh3.googleusercontent.com/-laAp8951z_c/T4EBBzBOd4I/AAAAAAAACVs/J7duW2jII70/s128/rotate-right.png) right bottom no-repeat;}
.navbar iframe{
      height:0;
      width:0;
      opacity:0;
      filter:alpha(opacity=0);
}
.navbar:hover{
      width:1007px;
      height:56px;
      z-index:11;
}
.navbar:hover iframe{
      background:#B5DDF4;
      width:1007px;
      height:30px;
      opacity:1.0;
      filter:alpha(opacity=100);
}

Cara menggunakan kode animasi navbar blogger

1. Login ke BloggerAnda bisa klik disini untuk login ke blogger!
2. Template
3. Backup/Restore Template. Panduannya bisa dibuka disiniKlik untuk mengikuti panduan cara melakukan backup/restore template.
4. Edit HTML
   

   Template › Edit HTML

   • Procced (Lanjutkan)
   • Cari Kode : ]]></b:skin>
   • Gunakan Ctrl + F untuk mempermudah & mempercepat pencarian.
   • Copy dan paste-kan kode css di atas kode ]]></b:skin>
   • Simpan Template/Save Template
5. Selesai...
6. Buka blog untuk melihat hasilnya.

Posisi kode css terhadap ]]></b:skin>

.navbar,.navbar iframe{
      transition:width 2s 4s,height 0.5s 5s,background-color 5s,opacity 7s;
      ... dst
}
.navbar:hover,.navbar:hover iframe{
      transition:width 0.2s,height 0.5s 0.4s,background-color 2s,opacity 3s;
      ... dst
}
.navbar{
      width:50px;
      ... dst
}
.navbar:hover{
      ... dst
}
.navbar:hover iframe{
      background:#B5DDF4;
      ... dst
}

]]></b:skin>