Cara Membuat Navbar Tersembunyi pada Blog

Posted by : Unknown Sunday, January 15, 2012

Navbar memang tak sepenting bagian dari tampilan blog yang kita buat. Namun, untuk kita yang suka iseng memodifikasi bagian bagian blog. Navbar bisa jadi hasil modifikasi kita. Anda tentu tau kan dengan apa yang namanya Navbar. Ya, benar sekali. Navbar ialah bagian Navigasi yang terletak di paling atas pada bagian blog, yang didalamnya terisi dengan link "Search Box", Ikuti, Berbagi, Blog berikut, Entry baru dst". Adanya Navbar sebetulnya cukup bermanfaat bagi blogger karena dapat menggunakan link-link yang tersedia seperti tersebut di atas, oleh karena itu mungkin ada yang menginginkan "Navbar tetap ditempatnya semula tetapi dibuat tidak terlihat (tersembunyi). Panduan cara membuat Navbar tersembunyi atau membuat navbar rahasia (display navbar on mouseover) ini sebetulnya sudah terpostingkan berbulan-bulan yang lalu. Judul seperti di atas mungkin tidak terlalu dikenal, oleh karena itu pada kesempatan ini coba aku postingkan lagi dengan pertimbangan supaya sobat blogger lebih mengenal bagaimana rupa dan tampilan navbar yang dibuat menjadi "navbar rahasia".

Penggunaan kode HTML navbar tersembunyi atau banyak blogger menyebutnya "Navbar Rahasia" berfungsi untuk membuat kesan seakan-akan navbar tidak ada. Navbar hanya akan terlihat ketika cursor pengunjung blog mulai menyentuh (disentuhkan) pada bagian navbar yang tersembunyi tersebut.

Navbar Tersembunyi :

-Login ke Blogger
-Dasboard/Dasbor »   KLIK "Layot/Tata Letak/Rancangan"
-Layout/Tata Letak/Rancangan " »   KLIK "Edit HTML"
-Back-up Template »   Amankan Template dengan cara KLIK "Download Template Lengkap"
-Folder PC »   Simpan di "folder PC".
-Edit HTML » Tetap di posisi "Edit HTML".
-body{ .... dst }: » Cari KODE CSS
```
 
```
```
body{
   .....
   ....
   dst
   }
```
(kode CSS tersebut terletak di bagian atas halaman Edit HTML)
Copy paste KODE di bawah ini dan letakkan tepat di atas KODE CSS yang tersebut di atas (body{ ....}).

#navbar-iframe{
       opacity:0.0;
       -moz-opacity:0.0;
       filter:alpha(Opacity=0);
       }
#navbar-iframe:hover{
       opacity:1.0;
       -moz-opacity:1.0;
       filter:alpha(Opacity=100);
       }