Blog Khusus Membahas Tentang Tutorial, Tips dan Trik Seputar Blog Di BlogspotDotCom


1 Sep 2010

4 Cara Mudah Mengedit Navbar di Blogspot

| 1 Sep 2010
Apa itu navbar, saya akan menjelaskan sedikit mengenai fungsi dari Navbar di Blogspot ini. 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 balik 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 mempermudahkan. mungkin itu sedikit ulasan dari fungsi Navbar.

Lihat Gambar


Nah kali ini saya akan menjelaskan bagaimana 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 { 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 perubanhannya.


Nah sekian dulu dari saya.. silahkan dicoba, semoga bermanfaat.

Related Posts

8 komentar:

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>