>Menghilangkan Tampilan Navigation Bar pada Blogspot

>

Setiap blog yang dibuat di situs Blogger/Blogspot secara otomatis akan memiliki sebuah batang navigasi (navigational bar) yang memanjang horisontal di bagian atas tampilan blog seperti ini:
Navbar
Sesuai namanya, navigational bar alias navbar dimaksudkan sebagai sarana navigasi bagi pengunjung blog. Pada navbar terdapat kotak pencarian (search) untuk mencari blog lain, dan tombol “Next Blog” untuk mengarahkan pengunjung secara acak ke URL blog lain (dalam lingkup Blogger). Selain itu navbar juga berfungsi sebagai shortcut login dan untuk menarik pengguna baru.

Namun di sisi lain, dari sudut pandang sebagian pemilik blog, navbar mungkin bukan elemen yang fungsional, malah dipandang sebagai elemen pengganggu tampilan blog mereka. Beberapa hal yang dipandang merugikan dari Navbar:
  • Navigation bar seringkali dianggap ‘merusak’ keutuhan dan keindahan tampilan desain blog yang dirancang sendiri oleh pemilik blog. Tampilan navbar yang terkesan seadanya dan kurang estetis sulit untuk dibikin menyatu dengan elemen lain dari desain blog mereka.
  • Jika pemilik blog telah memasang Google AdSense for Search(AdSense untuk pencarian), dia tentu lebih menginginkan pengunjung situs melakukan pencarian dengan kotak pencarian Google yang disediakannya. Keberadaan kotak pencarian lain pada navbar dapat ‘mengacau’ peluangnya untuk mendapat duit tambahan dari AdSense for Search tersebut.
  • Keberadaan tombol “Next Blog” pada navbar dapat menjadi bumerang bagi pengunjung. Ketika pengunjung menekan tombolNext Blog, mereka akan diarahkan secara acak (random) ke alamat blog lain yang juga menggunakan layanan Blogger. Apa jadinya jika pengunjung blog anda kebetulan seorang anak di bawah umur, dia menekan tombol tersebut, lalu diarahkan ke blog lain yang menyuguhkan materi-materi yang tidak senonoh?
Berikut trik unyil (trik kecil-kecilan) cara menghilangkan tampilan navbar dengan sedikit melakukan tweak pada kode CSS blog anda. Buka halaman edit html (Dashboard > Layout > Edit HTML).
Pada sembarang tempat di dalam area selektor body, yang dapat anda lihat seperti ini:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

tambahkan kode berikut:

margin-top:0px;
position: relative;
top: -50px;
Sehingga keseluruhan akan menjadi seperti ini (kode tambahan berwarna merah):
body {
margin-top:0px;
position: relative;
top: -50px;
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Logika script di atas:
nilai (-50px) merupakan negatif dari lebar (width) navbar yang sebesar 50 pixel. Dengan menerapkan nilai yang berlawanan dari lebar navbar tersebut, tampilan navbar akan ‘dibenamkan’ seluruhnya sehingga tak lagi mengganggu pandangan. Jika nilai -50px terlalu besar hingga sebagian tampilan blog anda ikut hilang, coba kurangi nilainya, misalnya menjadi -30px. Anda dapat mencoba nilai yang lain sesuka anda.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s