Tuesday, March 11, 2008

SHOW/HIDE BLOG NAVIGATION BAR in BLOGGER

With a little html coding you can choose to show or hide your blog navigation bar on your blog page. See the show/hide in the upper right corner of this page.

Here are 3 simple steps to add this to your blog page:

  • Paste the following html code between your <head>...</head> tags:

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


  • Add a Page Element (HTML/Java Script) to your blog page where you would like the show/hide navigation to appear.

  • Paste the following html code within this Page Element

    <span style="cursor:pointer;" onclick="ShowHideNav();">
    Show/Hide Navigation
    <a a style="visibility:hidden;">
    </a></span>


That's it! Enjoy!

8 comments:

Anonymous said...

People should read this.

Shedrow Queen said...

Hi Richard, sorry to bother you, but my navigation bar doesn't show up when I click on the link. I placed the code in my HTML and I added the HTML code in a new page element, the words show up, but when I click, nothing happens. I'm not a techie...any thoguhts?

Shedrow Queen said...

Nevermind! Figured it out! Nice addition to my blog! Thanks so much!

Richard said...

How's Life?

Is there something that we could add to our post to help someone in the future?

Lizzie Jones said...

Thanks so much! This helped a ton!

Mihai said...

Thanks for share these things.

Chris Ra said...

Hi! my problem is exactly the reverse: I imported a template which doesn't have the navbar visible, which is quite unpleasant.
how can I make it visible?
You can see the blog here: storytellingdrawings.blogspot.com

Thanks a lot in advance!
Chris

Thomas Goodson said...

Thanks for the information. I did find that your version was a little verbose (the visiblity lines simply aren't required.) and I chose to go after "navbar" instead of "navbar-iframe", but in the end, the result was the same.