How to make a Show/Hide Navbar button

1. Go to Blogger > Layout > Add a Gadget > HTML/Javascript

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

3. Save it. YAY YOU'RE DONE :D

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.

And here's a little tip: Add your button above the header so it'll be easier for people to click on it.

Until next time,

Bunny623