Beranda » teknik blog » Cara Buat Auto Hide Navbar Pada Blog

Cara Buat Auto Hide Navbar Pada Blog

Pada kesempatan sebelumnya kita sudah membahas bagaimana cara menghilangkan navbar pada blog. Nah, pada kesempatan kali ini kita akan membahas bersama tentang bagiamana caranya untuk membuat auto hide navbar pada blog.

Menghilangkan navbar dengan auto hide navbar memang memiliki fungsi yang sama, yaitu sama-sama digunakan untuk menyembunyikan tampilan navbar agar tidak terlihat dalam halaman blog kita. Akan tetapi, jika dengan cara menghilangkan navbar maka navbar blog memang secara permanen akan hilang dan tidak muncul lagi di halaman blog kita. Sedangkan auto hide navbar memang membuat navbar menjadi hilang di tampilan halaman blog, tetapi navbar akan otomatis/auto muncul seketika ketika kursor mengarah pada bagian paling atas dari tampilan blog kita dan akan hilang kembali ketika kursor menjauhi bagian paling atas halaman blog kita.

Bagaimana cara membuat auto hide navbar pada blog ini?

Pertama, masuk ke dalam akun blogger kita masing-masing.
Kemudian klik fitur rancangan.
Klik edit HTML.
Contreng Expand Template Widget.
Cari kode HTML berikut ini.

body {

Kemudian tempelkan kode HTML berikut ini tepat di atas kode HTML di atas.

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

Contoh penerapannya.

/* Content
----------------------------------------------- */
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread)

Klik simpan template dan selesai.

Keterangan :

Sebelum memulai proses editing kode HTML template, sebaiknya download template blog kita terlebih dahulu sebagai langkah antisipasi jika kita mengalami kegagalan saat proses editing berlangsung.
Gunakan tombol Ctrl + F pada keyboard untuk mempermudah pencarian kode HTML yang kita inginkan.

Sekarang coba kita lihat tampilan halaman depan blog kita. Bagaimana hasilnya? Navbar blog kita menjadi hilang bukan? Lalu, coba arahkan kursor mouse pada bagian paling atas blog, maka seketika navbar akan muncul dengan otomatis. Dan ketika kursor tersebut dijauhkan dari bagian atas blog, maka navbar akan kembali tersembunyi dengan sendirinya.

Cara ini mungkin tidak akan berpengaruh apa-apa ketika sebelumnya kita menggunakan template blog yang memang sudah disembunyikan navbarnya. Cara ini sangat berguna ketika kita masih menggunakan template bawaan blogspot dan tidak menghendaki tampilan navbar dalam blog kita tersebut.

Ada yang ingin menambahkan?

Jika ada tanggapan silakan disampaikan lewat kotak komentar di bawah ini ya kawan.