Show - Hide Navbar With Animation Using CSS3: Cara Menhilangkan Navbar Blogspot

Show Hide Navbar with Animation ini mungkin akan menjadi jalan tengah bagai beberapa sobat blogger yang tidak suka navbar ikutan nongol di halaman blog. Dengan menggunakan CSS3, kita akan membuat navbar tersembunyi (hilang) dan akan nongol lagi ketika cursor diarahkan pada satu titik tertentu. Tentu saja desain ini telah kita rancang secantik mungkin sehingga penampilan blog tetap terjaga. Dengan menyertakan kode CSS3 Transition, maka sebuah bentuk animasi gerak memungkinkan navbar sembunyi dan nongol dengan cara yang halus (tidak sruntal-sruntul kayak kalian, he ... he ...!). Saat blog dibuka navbar tidak akan terlihat. Di bagian atas blog (top bar) hanya akan terlihat sebuah image (gambar) yang kita gunakan sebagai "semacam swith" pembuka navbar. Saat cursor menyentuhnya, maka secara perlahan-lahan "si navbar" terlihat turun untuk memperlihatkan diri. Untuk menghilangkan navbar tersebut cukup lakukan dengan melepaskan cursor dari semua bagian navbar. Secara perlahan dia akan kembali pulang untuk bersembunyi ke habitatnya semula di di bagian atas blog. Sampeyan bisa coba melihat DEMO-nya dengan KLIK link di bawah ini. Carilah di bagian atas blog sebuah gambar (image) yang bertuliskan "Navbar (bertanda -panah-)".

Kode CSS

#navbar-iframe {
      height: 30px;
      padding-bottom: 30px;
      background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/navbar.gif) bottom right no-repeat;
      background-position: 99.5% 30px;
      position: absolute; 
      margin-top: -30px;
      -o-transition: all 1.5s ease-in;
      -moz-transition: all 1.5s ease-in;
      -webkit-transition: all 1.5s ease-in;
}
#navbar-iframe:hover {
      margin-top: 0px; 
      cursor: pointer;
      }

Cara menggunakan Show Hide Navbar

• Login : Login to BloGGeR (Login ke BloGGeR).
  • Masukkan/tuliskan "User Name" atau "Nama Pengguna". Sampeyan bisa juga menggunakan "Email Address".
  • Tuliskan "Password" atau "Sandi".
  • KLIK Login. Tunggu beberapa saat hingga sebuah window baru yang berupa halaman "dasboard" terlihat.
• Dasboard (Dasbor) : Beberapa link akan ditampilkan, pilih dan KLIK link "Design" atau "Rancangan" (sebelumnya dikenal sebagai "Tata Letak" atau "Layout". Tunggu kembali untuk beberapa saat.
• Design (Rancangan) : Bagian Design atau Rancangan yang akan terlihat adalah "Page Elements" atau "Elemen Laman". Halaman ini ditandai dengan terlihatnya beberapa kolom yang berisi box dan merupakan pola dasar desain blog sampeyan. (akan terlihat beberapa kotak (box) dengan garis terputus-putus). Lanjutkan dengan KLIK link "Edit HTML".
• Sampeyan akan melihat banyak kode HTML. Cari kode (tag) body yang letaknya di bagian atas template. Bentuknya kira-kira seperti yang terlihat di kode CSS. Jika sulit untuk mencarinya, silahkan buka tutorial tentang cara cepat mencari kode HTML yang terletak di Special Tutorials di sebelah kiri blog!.
• Copy kode CSS kemudian pastekan tepat di atas kode (tag) body.
• KLIK "SAVE Templates" atau "Simpan Template".
• Buka blog untuk melihat tampilan baru Navbar sampeyan.