Sunday, December 4, 2011

Cara Menghilangkan atau Menyembunyikan dan Auto Hide Navbar Blogger

Memiliki blog dengan design yang menarik adalah dambaan setiap blogger. Mereka berusaha menghias blog dengan berbagai aksesoris sehingga blognya tampil mengagumkan. Tetapi design yang menarik bukan satu-satunya cara untuk membuat blog populer. Design blog berhubungan dengan pemilihan template yang tepat. Akan tetapi pada template bawaan blogger khususnya blogspot terdapat sebuah fasilitas yang biasa disebut navbar. Navbar (Navigasi Bar) merupakan sebuah frame berukuran kecil memanjang yang muncul di bagian atas blog. Frame ini biasanya berfungsi untuk login ke blogger, untuk pencarian menuju blog lain, dan sebagainya.

Oleh sebagian blogger tampilan navbar dirasa kurang menarik, sehingga berusaha untuk menyembunyikan atau menghilangkan, dan Auto Hide (hilang timbul). Pada kesempatan ini, saya ingin berbagi pengalaman yang bertajuk “Cara menghilangkan atau menyembunyikan dan auto hide Navbar Blogger”. Namun sebelum melakukannya, sebaiknya anda pertimbangkan dulu karena menurut informasi dari beberapa teman menghilangkan Navbar dilarang oleh blogger karena dianggap melanggar TOS dan sebagian mengatakan diperbolehkan oleh blogger. Kenyataannya memang banyak blogger yang tidak memunculkan navbar di blognya dengan berbagai alasan. Untuk lebih jelas bentuk tampilan Navbar tersebut, lihat gambar di bawah ini!


Menghilangkan atau menyembunyikan dan auto hide Navbar (Navigasi Bar) Blogger dapat dilakukan dengan edit HTML pada CSS template. Bila anda ingin melakukannya, dianjurkan untuk mendownload (cadangkan/pulihkan) template anda untuk berjaga-jaga bila terjadi kesalahan. Selanjutnya ikuti salah satu tips sederhana di bawah ini!

Cara Menghilangkan atau Menyembunyikan Navbar Blogger

Cara ini sebenarnya tidak menghilangkan sama sekali navbar blogger di template anda. Cascading Style Sheet atau CSS tetap ada di template, namun disetting tidak dimunculkan dengan menambahkan kode tertentu. Inti kodenya adalah display:none. Berikut langkah-langkahnya:

  1. Silahkan login di blogger.com dengan account blog anda
  2. Pilih Template di menu pilihan Dashbor anda
  3. Pilih Edit HTML dan Proceed
  4. Beri tanda centeng pada kotak kecil di sebelah kiri Expand Template Widget
  5. Selanjutnya, cari kode ]]></b:skin>. Untuk mempercepat pencarian tekan Ctrl + F pada keyboard
  6. Setelah ketemu, letakan kode #navbar-iframe{height:0px;visibility:hidden;display:none} tepat di atas kode ]]></b:skin>.
  7. Klik simpan dan tunggu sampai proses selesai.
  8. Buka blog anda, maka navbar di blog anda tidak kelihatan lagi

Cara lain untuk menghilangkan atau menyembunyikan bahkan menghapus Navbar Blogger adalah sebagai berikut:
  1. Masih di Edit HTML, cari kode </head> atau kode <body>.
  2. Setelah ketemu, letakan kode <!-- <body><div></div> –> tepat di bawah kode </head> atau diatas kode <body>.
  3. Buka blog anda, maka navbar di blog anda tidak kelihatan lagi

Cara Membuat Auto Hide (Hilang Timbul) Navbar Blogger

Cara ini sedikit berbeda dari cara diatas dan dianggap tidak melanggar TOS. Navbar muncul bila kursor diarahkan pada bagian atas blog atau tempat navbar, dan navbar tersembunyi bila kursor tidak menyentuh bagian atas blog atau tempat navbar tersebut. Dengan kata lain navbar menjadi transparan auto hide (hilang timbul). Caranya membuatnya adalah sebagai berikut:

  1. Silahkan login di blogger.com dengan account blog anda
  2. Pilih Template di menu pilihan Dashbor anda
  3. Pilih Edit HTML dan Proceed
  4. Beri tanda centeng pada kotak kecil di sebelah kiri Expand Template Widget
  5. Selanjutnya, cari kode ]]></b:skin>. Untuk mempercepat pencarian tekan Ctrl + F pada keyboard
  6. Setelah ketemu, letakan kode #navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
    #navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100,FinishedOpacity=100)}
    tepat di bawah kode ]]]></b:skin>
  7. Klik simpan dan tunggu sampai proses selesai
  8. Buka blog anda, maka navbar berfungsi Auto Hide (hilang timbul)

Demikianlah, selamat bereksperimen. Semoga berhasil!
Ping your blog, website, or RSS feed for Free
Feedage Grade C rated
Preview on Feedage: nail-art-polish-2012 Add to My Yahoo! Add to Google! Add to AOL! Add to MSN
Subscribe in NewsGator Online Add to Netvibes Subscribe in Pakeflakes Subscribe in Bloglines Add to Alesti RSS Reader
Add to Feedage.com Groups Add to Windows Live iPing-it Add to Feedage RSS Alerts Add To Fwicki