Friday, April 27, 2007

Hack: Hide Navbar (hide/show button)

Once again! A quick note before we start... Because the Navbar is a form of advertising for Blogger, it may be against your terms of service to manipulate it. I haven't found anything to document this, and I'm personally using a Navbar hiding tecnique myself, so I'm not saying that it's going to get you into trouble. What I am saying, is if you do get in trouble and your blog happens to get deleted; I told you it was a possibility and I am in no way responsible... Yey Disclaimer!

Ok, this code will allow you to hide the Navbar when you want to, and show it if your editing your site. The navbars pretty helpful, so this may be better than just getting rid of it. Use your browsers "Find" (ctrl+F) function and search for <head> right below, paste the following.
<script type="text/javascript">
var showHeader=false;
function ShowHideNav()
{
showHeader=!showHeader;
var nav=document.getElementById("navbar-iframe");
if (showHeader)
{
nav.style.visibility="visible";
nav.style.display="block";
}
else
{
nav.style.visibility="hidden";
nav.style.display="none";
}
}
</script>
<style type="text/css">
#navbar-iframe {
visibility: hidden;
display: none;
}
</style>

Ok, that should hide the navigation, but to get it to click on and off, you need to paste the following code in a Page Element. I put mine in a regular html section.
<span style="cursor:pointer;" onclick="ShowHideNav();">
Show|Hide
<a style="visibility:hidden;" href="http://bloggingforsoup.blogspot.com"></a>
</span>

Remember to exchange the link to my website with yours and you should be all set! Enjoy hiding your new Navigation Bar!