Remove blogger navigation bar :: two methods

4:12 PM Posted by Preetish Panda

For each of the blogs at Blogspot.com, the domain name of free blog hosting for Blogger, there is a notable Blogger navigation bar (also known as NavBar) at the top of each blog pages!
They have got some important functions like new post,search,customize etc.But,many think that they badly mess with the look of blog.So,any wayz as you have decided to dump them I'm gonna tell you two methods to remove them.

1.Completely remove navigation bar (CSS hack)
2.Create show/hide button to display or show the navigation bar

1.Completely removing navigation bar (CSS hack)
Before jumping into this hack I must tell you this hack is restorable that is you can get your navbar back.
If you wonder how to remove the blogger beta navbar, this is the way to do it:

I. Login to your blogger account.

II. Open the “Layout” for your blog.

III. Click the “Edit HTML” link.

IV. Copy this code:

#navbar-iframe { height:0px; visibility:hidden; display:none }

V.Paste the code given above just after

<b:skin><![CDATA[

Click the “Save Template” link. You are done ..

2.Create show/hide navigation bar

I.Log in to blogger dashboard.

II.Click Layout and then click on edit html

III.Using your browser search function locate

IV.copy and paste following code just after <head>

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

V.Click save template

VI.Go to your page element section

Now add a page element to display show/hide button by copying following code

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

VII.Now view your blog and check its functionality.