2 (dua) Cara Menghilangkan Navbar Blogger-Blogspot

Sekalipun sebenarnya navbar yang terletak di bagian teratas blog mempunyai kegunaan, namun bagi banyak blogger, navbar dipandang mengganggu tampilan blog hingga berupaya untuk dibuang, disembunyikan, dihapus atau dihilangkan. Sebuah tindakan yang teramat wajar jika menilik betapa teramat sedikit blogger maupun pengunjung blog yang memanfaatkan navbar saat beraktifitas di sebuah blog. Ada beberapa cara untuk menghilangkan navbar blogspot ini, namaun dari sekian banyak cara, 2 cara ini dipandang paling efektif dan umum digunakan para blogger.

• Navbar dihapus total dari halaman blog:
  
  Dengan cara ini maka navbar tak akan terlihat sama sekali karena display navbar dibuat menghilang serta ketinggian navbar dibuat dalam nilai 0 (nol).
• Navbar disembunyikan:
  
  Navbar sepertinya hilang, namun sebenarnya hanya sekedar disembunyikan. Cara yang kedua ini banyak dikenal dengan istilah sebagai navbar tersembunyi, navbar otomatis atau navbar rahasia. Untuk membuat navbar dalam bentuk seperti ini kita memanfaatkan opacity effects sebagai cara untuk membuat efek transparansi hingga pada saat sebuah blog dibuka seakan akan navbar tidak ada. Navbar akan terlihat hanya pada saat mouse/cursor disentuhkan pada posisi dimana navbar berada (ujung atas blog).

Contoh bentuk Navbar Otomatis/Rahasia

Sentuhkan cursor di bawah ini!


Untuk model yang pertama tidak ada demonya karena anda bisa melihat dibeberapa blog yang ada banyak yang tanpa navbar.

Navbar Hilang Total

Kode CSS

#navbar, #navbar-iframe{
        display:none !important;
        visibility:hidden !important;
        height:0 !important;  
}

Navbar Hanya disembunyikan

Dengan kode CSS ini maka navbar secara otomatis akan terlihat ketika cursor menyentuh bagian navbar. Ini hanya berfungsi normal di luar Internet Explorer. Dengan kode CSS di bawah, maka di IE navbar tak akan terlihat. Jika anda ingin navbar tetap terlihat, hilangkan kode:

filter:alpha(opacity=0); dan filter:alpha(opacity=100);

Kode CSS

#navbar {
opacity:0;
filter:alpha(opacity=0);
}
#navbar:hover {
opacity:10;
filter:alpha(opacity=100);
}

Cara Menggunakan kode CSS

Silahkan pilih salah satu model untuk menghilangkan navbar dengan menyimpan salah satu kode CSS sesuai pilihan anda!

Cara Menyimpan Kode CSS di atas ]]></b:skin>

• Login : Login ke Blogger/Login to Blogger.
  • Tulliskan User Name/Nama Pengguna pada box yang telah disediakan. Selain User Name anda dapat juga menggunakan Alamat Email/Email Address.
  • Lanjutkan dengan menuliskan Password/Kode Rahasia/Sandi.
  • Setelah semua di isi dengan benar, KLIK Login
• Dasboard/Dasbor : Halaman dasbor ini akan terlihat sesaat setelah klik login. Temukan link Design/Rancangan. KLIK lin tersebut, kemudian tunggu beberapa saat hingga terlihat halaman baru "Page Elements/Elemen Laman" yang merupakan bagian dari Design/Rancangan.
• KLIK link Edit HTML.
• Di depan anda akan terlihat deretan kode HTML. Disinilah kode ]]></b:skin> tersimpan. Cari kode tersebut dengan menggunakan Ctrl+F. Jika mengalami kesulitan tentang penggunaan Ctrl+F, silahkan buka tutorial tentang masalah ini dengan membuka link berikut: Panduan cara Mencari Kode HTML di Template
• Letakkan kode CSS tepat di atas kode ]]></b:skin>.
• KLIK SAVE Templates/Simpan Template..
• Buka blog anda untuk melihat hasilnya!

Contoh penempatan kode CSS di atas ]]></b:skin>

#navbar {
opacity:0;
filter:alpha(opacity=0);
}
#navbar:hover {
opacity:10;
filter:alpha(opacity=100);
}

]]></b:skin>

Semoga bermanfaat!

Happy Blogging ....!

Tutorial Menarik Lain

Anda bisa mengikuti tutorial blogger yang super lengkap dan berisi ratusan tutorial dengan bahasa yang gampang dipahami lengkap dengan berbagai desain cantik CSS3 dengan membuka link di bawah ini:

• gubhug reyot
• bloggerstuars