which when clicked upon will hide the navbar if it is displayed, and display the navbar if it is hacked. As I don't want to execute the hack in this blog, I tested it in the blog Computer and Internet Articles. The toggle switch (which is the text you see above) is placed at the bottom of the right sidebar, below my profile. Click on it and observe what happens to the navbar.You can get Derya's hack here How to hide the navbar? if you are interested in the hack. It is very easy to implement. All you have to do is to get to the template editor, look for the <head> tag, then paste the script he has given. When I implemented the hack, I only made some small modification to the hack. I put a comment (part of a program that does nothing but document a program to make it easy to follow and understand). I put the comment
<!-- Show/Hide navbar begins --> followed by the script, then at the end of the script, I marked it with the comment
<!-- Show/Hide navbar ends -->
For easier understanding, I put the script below:
<head>
<!-- Show/Hide navbar begins -->
<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>
<!-- Show/Hide navbar ends -->
The part in black (<head>) is what is already in the template, and the part in red are what is added to the template.
You will then have to add this to a page element in a part of the blog that you choose:
<!-- Show/Hide navbar hack -->
<span style="cursor:pointer;" onclick="ShowHideNav();">
Show/Hide Navigation
</span>
<span style="cursor:pointer;" onclick="ShowHideNav();">
Show/Hide Navigation
</span>
