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>
3 comments:
It’s a very useful script.
But take a look at my implementations on http://dan.n.moldovan
I like your blog.
For me the navbar disappeared but left a gap in its place (at least in Firefox).
To avoid this, change the line in the style section near the bottom to:
display:none !important;
Solves it. Got it from another blog.
Hi, I was searching code to hide navbar in bloger since long. I have now find it on your blog and is very much useful.
Thanks for such creative blog you have published.
kharadipraful@yahoo.com
Post a Comment