Why and How to Hide or Remove Blogger Navbar

Best practice to disable or get rid of Blogspot.com blog Navigation bar with CSS codes which give option to either hide or remove Blogger Blog Navbar.

As we know that Blogger is very popular and apex free service provider for communication, self-expression and freedom of speech to spread knowledge and thought. Actually, Blogger service was created by Pyra Labs Company (co-founded by Evan Williams and Meg Hourihan) in 1999. In 2003, Pyra was acquired by Google.

If you have created a new blogger blog then you will see a Navbar (Navigation bar) at the top of your blog i.e. just above the header or title of your blog. Till now many people after creating the blog, irrespective of so many benefits, search for the tricks and tips to Hide or Remove blogger Navbar so that their weblog will looks like a website.

First of all you should know about the Blogger Navbar before you disable/ hide or remove it permanently. Actually it appears on all freely-hosted BlogSpot.com blogs for providing various services/benefits. You will see two different Navbar one before login and other after login to the blogger.

A) Benefits of Navbar before Logged in:

Blogger Logo [B]: which will take you back to www.blogger.com

Search: You may search the entire blog you’re viewing.

Share: May share/promote any article or posts on social websites (Twitter, Facebook and Google Reader ).

Report Abuse: Give a flag to tell blogger about the contents of any blog.

Next Blog: You can view the recently-updated Blogger blog.

Create Blog: For creation of new blog.

Sign In: Displays the option for login.

 B) Benefits of Navbar after Logged in:

After log in you will see two extra options Follow and Dashboard.

Earlier, at the time of removing the Navbar, the issue was that whether we violate the Terms of Service of blogger as a result of which the Blog would be deleted and account may be closed.

But, the blogger policy/TOS is silent about the Navbar removal and there is not any issue or story of a blog which has been deleted/ disabled after removal of Navbar. Further, the blogger itself has now given an option to hide or remove blogger Navbar from your blog.

1) New way to Turn off Blogger Navbar

Step-1:

Go to the Layout option of your blog and click on edit for Navbar shown at the top right corner.

Step-2:

You will see a new option (Off) at the end of open pop up Navbar Configuration window along with other options to change the colours of the Navbar.

Step-3:

Select the Off option and save it as shown below.

Thus, you may prefer to use the other tricks to disable/hide or remove your blog’s Navbar as shown below:

2) How to AUTO Hide Blogger Navbar

This is the other option which only hide the Navbar and whenever you drop the mouse to Navbar, it will appear again. Note that it does not work for the internet explorer browser. Paste the following CSS Code after <b:skin>:

#navbar-iframe {
opacity:0.0;
filter:alpha(Opacity=0);
}

#navbar-iframe:hover {
opacity:1.0;
filter:alpha(Opacity=100,FinishedOpacity=100);
}

3) How to Complete Hide Blogger Navbar

If you want to complete remove the Navbar then paste this CSS Code just after <b:skin> :

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

4) How to Delete the Blogger Navbar

However, you want to delete the Navbar widget from your blog completely then follow these steps:

Step-1:

Find this line in blogger template and replace change shoaddelement from no to yes.

<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>

Step-2:

Now delete all codes from <b:widget id=’Navbar1’… … to   </b:widget>

<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>
      <b:includable id='main'>
..............
..............
.................
</b:includable>
    </b:widget>

Congrats! Your blog are now looking professional website.