Hidden Navbar Blogger Use Simple JavaScript

Sebelumnya story of menghias navbar blogger ternyata cukup mendapat respon. Maka dari itu kelanjutannya harus diberi sentuhan² seni agar sedikit full stylish ;)) Ide kreasi, Koben dapatkan dari blog kepunyaan master Roxx \m/ Sepertinya dia sedang enjoy ngulik² and membuat template. Komentar malah promosi =))
Hasil kerja dari hack trick sekarang, yaitu menyembunyikan navbar blogger dengan teknik menutupi navbar dengan background. Dibubuhi sedikit ramuan JavaScript, tidak lain untuk membuka si background agar terlihat kembali itu si navbarnya :D Begitu kira² penjelasan yg tidak menjelaskan :P Singkat cerita mirip dengan trick berikut on off navbar! Tapi saat ini, cuman membuka saja, enggak bisa menutup lagi :D Lumayan untuk gaya-gayaan b-)

Langkah pertama silahkan lakukan backup full template. Kemudian tekan Ctrl + F pada keyboard, temukan kode #navbar-iframe Gantikan variabel CSS yang ada dengan yang ini#navbar-iframe {
display: block;
}Setelah itu tepat dibawahnya tambahkan CSS coded bumbu

#hidden_navbar {
background-color: #333;
position: absolute;
top: 0;
right: 0;
height: 30px;
width: 100%;
}
#hidden_navbar img {
float: right;
margin-right: 7px;
margin-top: 7px;
cursor: pointer;
}

Kode CSS keseluruhan

#navbar-iframe {
display: block;
}
#hidden_navbar {
background-color: #333;
position: absolute;
top: 0;
right: 0;
height: 30px;
width: 100%;
}
#hidden_navbar img {
float: right;
margin-right: 7px;
margin-top: 7px;
cursor: pointer;
}

Temuin kode </body> tepat diatas/sebelum letakin aji² berikut<div id='hidden_navbar'><img onClick='closeNavbar();return false;' src='http://2.bp.blogspot.com/-PBFoNGJ02b4/TihkiNYR9_I/AAAAAAAABEs/Iy8GGRhULjs/s1600/navbar.png' alt='open' title='show navbar'/></div>
<script>//<![CDATA[
function closeNavbar() {
document.getElementById("hidden_navbar").style.visibility = "hidden"
};
//]]></script>SAVE. Lihat hasil kerja :)
Itu bumbu untuk navbar default bawaan blogger, dengan panjang full monitor. Sekarang bagaimana jika tampilan template seperti Beben Koben si bloglang anu ganteng kalem tea, yang mana konten berada di tengah² monitor! Beda dikit pada ramuan CSS-nya doang kok sob ;)

Untuk konten template center/tengah maka kode css ganti dengan yang berikut. Bumbu lainnya mah sama!

#navbar-iframe { 
width: 950px;
margin: 0 auto;
display: block;
}
#hidden_navbar {
background-color: #333;
position: absolute;
top: 0;
right: 0;
left: 0;
width: 950px;
height: 30px;
margin: auto;
}
#hidden_navbar img {
float: right;
margin-right: 7px;
margin-top: 7px;
cursor: pointer;
}

Aturlah panjang/width sesuai dengan kebutuhan. Begitu saja kira² postingan kali ini :)
Eh kelupaan, background-color: #333; bisa kalian fariasikan menjadi gambar. Tapi harus bisa kode²nya ya :))
Happy navbar \m/