Blogger: Dynamic Navbar Hack

If you have a blog at blogspot you might have been annoyed by it before: the navigation bar. In blogger, by default, the navigation bar is on top of your blog in the browser window. Leaving the navbar has often been criticized as looking unprofessional and not many people find the navbar useful, although blogger is adding some functionality such as social bookmarking. It is easy to get rid of the navbar, but there is another solution which is to make it look good. This can be achieved by a simple hack. Here I explain how to do it.

I discovered this hack in the html source code of blogger-hacked.blogspot.com, by Deepak. If you follow the three steps below, instead of a static navbar, the navigation bar becomes invisible and turns only visible when the mouse goes over the area of the navigation bar.

Step 1

Go to design->edit HTML. Better you make a backup copy of your template, before editing, by clicking "download complete template." If you have any code to remove the navbar, get rid of it. This could look like the following:
#navbar { display: none; }

Step 2

Seach for <b:skin><![CDATA[/*. Paste the following code behind it:


/* NAVBAR STYLES
----------------------------------------------- */
.show {
filter:alpha(opacity=50);
opacity:.5;
-moz-opacity:0.5;
}
.hide {
filter:alpha(opacity=0);
opacity:0;
-moz-opacity:0.0;
}

Step 3

Now search for </head> and paste the following code before:

<!-- Begin navbar hack -->
<script type='text/javascript'>
//<![CDATA[
function show_navbar() {
   var nbar=document.getElementById ("navbar");
   nbar.className="show";
}

function hide_navbar() {
   var nbar=document.getElementById("navbar");
   nbar.className="hide";
}

function navbar_hack() {
   var nbar=document.getElementById ("navbar");
   nbar.className="hide";
   if (nbar.addEventListener) {
      nbar.addEventListener ("mouseover",show_navbar,false);
      nbar.addEventListener ("mouseout",hide_navbar,false);
   } else if (nbar.attachEvent) {
      nbar.attachEvent ("onmouseover",show_navbar);
      nbar.attachEvent ("onmouseout",hide_navbar);
   } else {
      nbar.onmouseover = show_navbar;
      nbar.onmouseout = hide_navbar;
   }
}
/* Remove the body onload dependency for reusability */
function addLoadEvent(func) {
   var old = window.onload;
   if (typeof window.onload != 'function') {
      window.onload = func;
   } else {
      window.onload = function() {
         old();
         func();
      }
   }
}

addLoadEvent(navbar_hack);
//]]>

</script>




That's all. You can change the colors in the Layout->Page Elements editor. Enjoy! Tell me how it works for you.