Menyembunyikan Navigation Bar Blogger

Wah senangnya bisa berbagi tulisan dengan anda. Kali ini saya akan berbagi tentang cara memodifikasi kode batang navigasi/Navigation Bar (Navbar) untuk blogger. Kita dapt mengatur Navbar untuk tidak ditampilkan atau mengaturnya agar tampil hanya ketika kita mengarahkan pointer ke bagian atas halaman saja.

Langkah yang harus anda tempuh adalah:
1. login ke akun Blogger anda
2. Ketika masuk ke dasboard, klik design, edit html
3. Cari kode dibawah ini (sesuai dengan template yang anda gunakan)

[CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Travel
Designer: Sookhee Lee
URL: www.plyfly.net
----------------------------------------------- */

Untuk menyembunyikan Navbar, ikuti cara berikut:
- Setelah anda menemukan kode seperti pada langkah nomor 3, letakkan kode ini dibawahnya

/* Hide the Navigation Bar
==========================*/
#navbar { display: none; }

Jika ditulis menjadi:
[CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Travel
Designer: Sookhee Lee
URL: www.plyfly.net
----------------------------------------------- */

/* Hide the Navigation Bar
==========================*/
#navbar { display: none; }

- Simpan Template anda dan lihat hasilnya

Untuk menyembunyikan Navbar tetapi dapat muncul kembali saat pointer diarahkan ke bagian atas halaman ikuti langkah berikut:

- Setelah anda menemukan kode seperti pada langkah nomor 3, letakkan kode ini dibawahnya

/* Hide the Navigation Bar
==========================*/
#navbar-iframe{opacity:0.0; filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0; filter:alpha(Opacity=100, FinishedOpacity=100)}

Jika ditulis menjadi:
[CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Travel
Designer: Sookhee Lee
URL: www.plyfly.net
----------------------------------------------- */

/* Hide the Navigation Bar
==========================*/
#navbar-iframe{opacity:0.0; filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0; filter:alpha(Opacity=100, FinishedOpacity=100)}


- Simpan Template anda dan lihat hasilnya, arahkan pointer untuk menguji tampilannya.

Keterangan kode:
/* Hide the Navigation Bar
==========================*/ Komentar, berfungsi sebagai penanda saja. Anda boleh menghapusnya atau tidak memasang bagian ini.

#navbar { display: none; } Berfungsi menyembunyikan tampilan Navbar


#navbar-iframe{opacity:0.0; filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0; filter:alpha(Opacity=100, FinishedOpacity=100)} Berfungsi mengatur opacity menjadi 0 (Invisible), dan menjadi 100 (Visible) ketika pointer diarahkan pada Navbar yang tak terlihat.

Untuk mengembalikan seperti semula cukup anda hapus saja kode tersebut dan simpanlah kembali template anda.