Menyembunyikan Tampilan Navigation Bar (Navbar) pada Blogger

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:

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:

• Navbar 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 menyembunyikan 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.

Perlu dicatat, trik yang kita lakukan di sini adalah untuk MENYEMBUNYIKAN (hiding), bukan MEMBUANG (remove) navbar. Artinya tindakan anda tidak berlawanan dengan TOS (Terms of Service) alias kontrak hukum antara anda selaku pihak pengguna layanan Blogger dengan Pyra-Blogger (penyedia layanan). Pada TOS memang disebutkan:

————————————————————————————————-

By creating your BlogSpot Site, you agree that Pyra has the right to run such advertisements and promotions.

You also agree that you will not attempt to block or otherwise interfere with advertisements displayed on your BlogSpot site via JavaScript or any other means. Doing so is grounds for immediate termination of service. The manner, mode and extent of advertising by Pyra on your BlogSpot Site is subject to change.

———————————————————————————————————

Kalau mau sedikit “cangkeman” alias adu mulut secara yuridis, yang kita lakukan di sini bukanlah mencoba untuk melanggar pasal mengenai “block or otherwise interfere with advertisements displayed on your BlogSpot site via JavaScript or any other means“ sebagaimana disebutkan dalam kontrak di atas dengan cara membuang navbar, melainkan sekadar melakukan reposisi tampilan navbar tersebut sesuai dengan kebebasan pemilik blog untuk memodifikasi desain blognya. Biarpun hasilnya sama (navbar tak lagi terlihat) namun implikasi hukumnya akan berbeda.

Anda bisa melihat contoh blog saya di Blogger yang bagian navbarnya telah dihilangkan dari tampilan di sini.