Cara Membuat Auto Hide Navbar Pada Blogger
Di Posting
on 4/04/2016 01:14:00 PM
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.
Kemudian tempelkan kode HTML berikut ini tepat di atas kode HTML di atas.
Contoh penerapannya.
Klik simpan template dan selesai.
Keterangan :
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.
Salam blogger!
Website : indoblogseo
Credit : Dhie Valt Mhorsyl
![]() |
| indoblogseo |
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)}
#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)
----------------------------------------------- */
#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.

Salam blogger!
Website : indoblogseo
Credit : Dhie Valt Mhorsyl
Terimakasih telah membaca : Artikel Dari Kami. Silahkan masukan email anda dibawah ini! dan anda akan otomatis mendapatkan kiriman artikel terbaru dari MudahTrick. Terimakasih.
0 Komentar untuk : Cara Membuat Auto Hide Navbar Pada Blogger
Entri Populer
Arsip Blog
-
▼
2016
(103)
-
▼
April
(91)
- Cheat Diamond Dan Gold Line Lets GetRich Terbaru 2...
- 6 Langkah Cara Mempercepat Loading Di Blogger
- Mempercepat Loading Blogger Dengan Tanda Garis Miring
- Trick Cara Membuat Daftar Isi Blog Berdasarkan Label
- Trick Cara Membuat Daftar Isi Blogger Bag II
- Cara Menyembunyikan Tanggal Pada Komentar Blogger SEO
- Cara Menghilangkan Navbar Pada Blogger SEO
- Cara Membuat Auto Hide Navbar Pada Blogger
- Tips Renewal Domain CO CC
- Cara Menampilkan Judul Postingan Pada Halaman Utam...
- Cara Buat Random Post Di Blog Versi 3
- Widget Total Posts dan Total Comments Blogger
- Cara Menghilangkan Klik Kanan Pada Mouse Blogger
- Charles Debugging Proxy All Windows Terbaru 2016
- Download Cheat Engine Versi Terbaru 2016
- Download Aplikasi Gamekiller apk Android Gratis
- Fiddler Debugging Proxy All Windows Terbaru 2016 Work
- Kumpulan Cheat Game Android Tanpa ROOT Lengkap Ter...
- Cara Buat Address Bar Berjalan Di Blogger
- Cara Membuat Label Blog Menjadi Dua Kolom
- Cara Merubah Bentuk Kursor Mouse Pada Blogger
- Cara Mempromosikan Blog Dengan Situs Jejaring Sosial
- Widget Animasi Abowman Untuk Blogger SEO
- Cara Pasang Musik Di Blog Dengan Mudah
- Untung Dan Rugi Pasang Musik Di Blogger SEO Friendly
- Cara Membuat Warna Komentar Admin Di Blog Menjadi ...
- Trick Cara Melihat Harga Sebuah Blog
- Cara Buat Tombol Print Pada Blogger SEO
- Trick And Tips Cara Menyembunyikan Footer Pada Blo...
- Rahasia Trik Mendapatkan Email dan Password Blogsp...
- Trik Rahasia Melindungi Gambar Pada Postingan Blog
- Cara Pasang Screen Saver Pada Blogger SEO
- Trik Cara Upload JavaScript Di Google Code
- Cara Membuat Dan Pasang Status Loading Di Blog
- Trik Untuk Mengatasi Kotak Kode Verifikasi Komenta...
- Trik Cara Menampilkan Avatar Pada Komentar Blogger
- Cara Membuat Banner Pasang Iklan Di Blogger SEO
- Trik Cara Daftar dan Submit Blog Di Google
- Cara Mendaftarkan Blog Ke Yahoo Bing Webmaster
- Cara Pasang Random Posts SEO Friendly Di Blogger
- Tips Cara Menghapus Atribusi Blogger
- 6 Kelebihan Blogspot SEO Friendly
- Cara Buat Teks Melingkari Kursor Mouse Di Blogger
- Cara Pasang Script Alert Selamat Datang Konfirmasi...
- Cara Tambah Scroll Di Komentar Blogger
- Menambah Efek Salju Di Blogger SEO
- Cara Membuat Javascript Di Blogger
- Cara Menghilangkan Atribut Tulisan LinkWithin Di B...
- 4 Manfaat Utama Update Konten Di Blogger
- Cara Menghilangkan Tombol Tang dan Obeng Di Blogger
- Cara Membuat Read More Otomatis Di Blog
- 4 Kerugian Mengganti Template Blogger SEO Friendly
- Pengertian Sitelink Google SEO Friendly
- 3 Manfaat Sitelink Google
- Cara Ubah Jenis dan Ukuran Font Di Postingan Blogg...
- 8 Tanda Blogger Yang Baik SEO Friendly
- Cara Mengetahui Malware Atau Virus Pada Blog
- Trik Cara Menambah Efek Gelembung Di Blogger
- 5 Tips Penting Memilih File Hosting Dengan Benar
- Tutorial Kolaborasi Nama Blog dan SEO
- 4 Situs SEO Analysis Untuk Blogger SEO Friendly
- Pentingnya Referensi Terpercaya Saat Menulis Posti...
- Pengaruh Mood Ketika Menulis Di Bloggers
- Perbedaan Halaman Post dan Page Pada Blogspot SEO
- Manfaat Search Box Atau Pencarian Pada Blog
- Cara Membuat Twitter Follower Box Di Blogger SEO F...
- Tutorial Cara Mengetahui Hosting Sebuah Blog
- Tutorial Mengenal Splog Lebih Dekat
- Tutorial Perbandingan Splog dan Blog Spam
- ini lah Perbedaan Blog dan Website
- Trik Cara Daftar Feedburner
- Cara Cepat Membuat Tabel Pada Blogger
- Cara Buat Ruang Iklan 125x125 Pada Blogger
- Apakah Google Penguin Itu?
- Cara Pasang Widget Google+ Di Blogger Simple Denga...
- 5 Ciri Backlink Berkualitas SEO Friendly
- 4 Kesalahan Utama Saat Menulis di Blogger SEO Frie...
- Inilah 6 Trik SEO Yang Saya Lakukan Saat Publikasi...
- Tips Optimalisasi SEO Pada Gambar
- Cara membuat Breadcrumb Seo Friendly di Blogger
- Cara Mengetahui Blog Dofollow/Nofollow Dengan Add-...
- Google PageRank Update 4 April 2016 - 2018
- Cara Buat Tombol Share Dengan Efek jQuery Nudging ...
- 5 Tips/Cara Menulis Artikel Blog Post SEO Friendly...
- Cara Buat/Pasang Burung Twitter Terbang Bergerak D...
- Alexa | Cara Cepat Meningkatkan Alexa Rank Di Blogger
- Evo Magz: Template Blogger Keren Responsive & SEO ...
- Cara Agar Blog Cepat Terindex Google - Yahoo - Bin...
- Trik Seo Long Tail Keyword Blogger
- Cara Setting Pengaturan Internet Di Android - IOS
- Meta Tag Seo Friendly 2016-2017
-
▼
April
(91)
