Monday, May 25, 2009

blogger navbar hack explained

Many people use blogger to power their blogs and find the navbar at the top very annoying. Some of them came up with some nice tricks to hide/remove the same. In this article, I'll be explaining how the trick works.

#navbar-iframe{ display:none !important;}

you might have come across this code in many articles. Well... this is how it works.

blogger adds the following code to your blog.

 [iframe src="..." id="" navbar-iframe ...][/iframe]

If you observe carefully, this 'iframe' tag has an ID attribute set to "navbar-iframe". Inorder to hide it we set the CSS rule "#navbar-iframe{ display:none;}" which tells the browser that the element with the ID attribute "navbar-iframe" should not be displayed. However, Blogger adds the following CSS automatically

#navbar-iframe{display:block;}

And since this CSS rule comes after the one which we applied, the latter has more preference and our rule doesn't get applied. This is because of the CASCADING property of CSS. Inorder to override this, we have an "!important" declaration. A rule that has the "!important" property will always be applied no matter where that rule appears in the CSS document. So if you wanted to make sure that a property always applied, you would add the !important property to the tag. So we apply this "!important" property to our style:

#navbar-iframe{ display:none !important;}

Now, display of the tag with id attribute "#navbar-iframe" is set to "none" which tells the browser not to display the same. Hence, the navbar gets hidden.

The same thing can be achieved using javascript too.

document.getElementById('navbar-iframe').style.display='none';

This method has been used in http://apnerve.blogspot.com/2009/02/new-apnerves-hide-blogger-navbar-widget.html

PS: Few other CSS rules that work are:

#navbar{display:none;}
#navbar{visibility:hidden;height:0px;}
.navbar{display:none;}
.navbar{visibility:hidden;height:0px;}