How to Hide Blogger Navbar

What's the blogger navbar? It's that ugly strip of color at the top of your blog. It can be blue, tan, black, translucent, etc. This is what it looks like:

This tutorial will show you how to hide it, but still have access to it.

1. Log into your blog and go to the layout page (that's the page where you add all the gadgets).

2. Click on "add a gadget" .

3. Click on HTML/JavaScript and cut and paste the code below

<!-- DROPDOWN NAVBAR -->
<!-- stylesheet for FF2, Op9, IE7 undefinedstrict mode) -->
<style type="text/css">
#navbar {
display:inline;
width:100%;
position:absolute;
background-color:transparent;
top:-30px;
left:0px;
height:60px;
z-index:999999;
}
#navbar:hover{
top:0px;
height:30px;
}
</style>
<!-- stylesheet for IE6 and lower -->
<!-- undefinednot supporting element:hover) -->
<!-- first, unhide the navbar through css -->
<!-- second, hide the navbar and mimic -->
<!-- the effect with javascript, if available -->
<!--[if lt IE 7]>
<style type="text/css">
#navbar {
height:30px;
top:0px;
}
</style>
<script type="text/javascript">
var navbar = document.getElementByIdundefined'navbar');
ifundefinednavbar){
navbar.onmouseover = functionundefined){
navbar.style.top = '0px';
navbar.style.height = '30px';
}
navbar.onmouseout = functionundefined){
navbar.style.top = '-30px';
navbar.style.height = '60px';
}
if undefinednavbar.captureEvents){
navbar.captureEventsundefinedEvent.MOUSEOVER);
navbar.captureEventsundefinedEvent.MOUSEOUT);
}
navbar.onmouseoutundefined);
}
</script>
<![endif]-->
<!-- end dropdown navbar -->

4. Click Save

Now go view your blog. Tada!

Oh, you want to know how to access it? Well, let me tell you. Scroll your mouse over where the navbar used to be (try mine above the banner). Now you see it, now you don't.