Make a Show/Hide Navbar button

It's been a super long time since the last tutorial... Here's a new one, requested by Magiic.

How to make a Show/Hide Navbar button

First, go to Blogger > Design > Page Elements > Add a Gadget > HTML/Javascript.
Then, copy and paste this code:

<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>


<span style="font-weight:bold; font-size:20px;" onclick="ShowHideNav();">
Show/Hide the Navbar
<a style="visibility:hidden;" href="#"></a>
</span>

You can also customize the button.
The first way is to change the "Show/Hide the Navbar" text (bolded) to anything you want.
You can also change the appearance by editing the code in the span style;

span style="font-weight:bold; font-size:20px;"

If you know how to, change the bolded text to any appearance settings you want... if you don't, you can check this out to learn some cool customization code. (Click on anything under "CSS Styling")

Save, Preview, and View! YAY. YOU'RE DONE! :D

And here's a little tip. Add your button above the header so it'll be easier for people to click on it. If you need to know how to add gadgets above the header, click here!

So that's basically it!

Until next time,