How to Hide or Display the Navbar in Blogger Blogs

Discuss webmaster issues, website development and resources. Ask questions about website building, coding, SEP/SEO etc here. NO ADS!

Moderators: magnetize, Oosha, ftello, shezz

How to Hide or Display the Navbar in Blogger Blogs

Postby Tel » Tue Apr 14, 2009 3:29 pm

Hi everyone. If you ant to know how to hide/display the NavBar in blogger blogs just like Griz does in his MMOFB but with the added advantage of without linking out to any other site, here's how. You need to be ok with editing the template in blogger for this by the way.

In the HTML section, directly before the closing </head> statement, copy and paste in the following code:

Code: Select all
<script type='text/javascript'>
var showHeader=false;
function ShowHideNav()
{
showHeader=!showHeader;
var nav=document.getElementById(&quot;navbar-iframe&quot;);
if (showHeader)
{
nav.style.visibility=&quot;visible&quot;;
nav.style.display=&quot;block&quot;;
}
else
{
nav.style.visibility=&quot;hidden&quot;;
nav.style.display=&quot;none&quot;;
}
}
</script>
<style type='text/css'>
#navbar-iframe {
visibility: hidden;
display: none;
}
.csharpcode, .csharpcode pre
{
   font-size: small;
   color: black;
   font-family: Consolas, &quot;Courier New&quot;, Courier, Monospace;
   background-color: #ffffff;
   /*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
   background-color: #f4f4f4;
   width: 100%;
   margin: 0em;
}
.csharpcode .lnum { color: #606060; }
</style>


Save it, then go to the Page Elements section and add a new HTML/Javascript wodget. In here add this code:

Code: Select all
<span style="cursor:pointer; font-weight:bold;" onclick="ShowHideNav();">
Show/Hide NavBar
<a style="visibility:hidden;" href="http://yourblog.blogspot.com"></a>


Replace "yourblog" with the name of your own blog.

Save it and you're done! 8-,
User avatar
Tel
Site Admin
 
Posts: 2919
Joined: Sun Mar 25, 2007 4:52 am
Location: Spain

Return to Web Development Resources

Who is online

Users browsing this forum: No registered users and 1 guest

cron