Mengedit Navbar

Navbar atau Navigasi Bar merupakan fasilitas standar yang dimiliki oleh Blogger.com. Letaknya berada di bagian paling atas dari blog yang berfungsi untuk memudahkan kita untuk kembali ke dashboard utama lalu mencari alamat url blog teman-teman kita yang lain, bisa juga untuk secara otomatis mencari blog berikutnya, bisa juga untuk mengkustomisasi blog kita lalu melihat entri baru lainnya, kurang lebih Navbar digunakan untuk akses cepat/memberikan fungsi memudahkan.

screenshoot navbar

Cara Mengkostumisasi Navbar :

cara memunculkan Navbar, Menyembunyikan Navbar, membuat navbar auto hide, dan merubah ukuran dari navbar.
kita bahas satu persatu.

A. Cara Memunculkan Navbar

1. Pertama Login ke account blog sobat.

2. Pilih Tata Letak kemudian Edit HTML.

3. Centang Expland Template Widget.

4. setelah itu cari kode seperti (atau kode mirip):

#navbar, #navbar-iframe {

Height: 0px;

Visibility: hidden;

Display: none;

}

5. Hapuslah kode di atas, kemudian simpan template, dan lihat hasilnya.


B. Cara Menyembunyikan Navbar

1. Pertama Login ke account blog sobat.

2. Pilih Tata Letak kemudian Edit HTML.

3. Centang Expland Template Widget.

4. Masukkan kode berikut sebelum atau diatas kode ]]></b:skin>

/* hilangkan navbar ----------------------------- */ #navbar-iframe {/* hilangkan navbar ----------------------------- */ #navbar-iframe { height:0px; visibility:hidden; display:none }

5. Jika sudah tinggal di Simpan Template dan lihat hasilnya.


C. Cara membuat navbar auto-hide

1. Pertama Login ke account blog sobat.

2. Pilih Tata Letak kemudian Edit HTML.

3. Centang Expland Template Widget.

4. Masukan kode dibawah ini, dan simpan tepat diatas kode ]]></b:skin>

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

5. Simpan template, dan lihat hasilnya.


D. Cara Merubah Lebar Navbar

1. Pertama Login ke account blog sobat.

2. Pilih Tata Letak kemudian Edit HTML.

3. Centang Expland Template Widget.

4. Masukan kode dibawah ini, dan simpan tepat diatas kode ]]></b:skin>

#navbar-iframe {
width:980px;margin:0 auto;
background:#6f0566;
}

Ukuran WIDTH saya sesuaikan dengan lebar dari template, demikian juga dengan warna Background.

5. Simpan template dan lihat perubahannya.

*diambil dari berbagai sumber dengan sedikit revisi

Posted in: Blogging