Thursday, May 6, 2010

How to Remove the Blogger Navbar

It is easy to hide the Blogger Navbar and it only takes a couple of minutes to do this simple Blogger trick.

Most people dislike the Blogger Navbar and want to remove it because it looks unprofessional and it encourages readers to leave your blog by clicking on the Next Blog link. If you are using a custom template the Blogger Navbar is likely to already be hidden but if you are using a default Blogger template it will need to be removed manually.

Before you get rid of the Blogger Navbar completely though remember that it has some pretty useful features such as:

1. Follow Me link to encourage your readers to follow you
2. Share via email, Facebook, Twitter, Google Buzz, Google Reader
3. Blog search
4. Quick links to Blogger New Post, Page Elements and Blogger Dashboard

I would suggest that if you do decide to hide the Blogger Navbar that you add a custom search box and some social bookmarking features to your blog to partly compensate for the features you will be losing.

If you simply want to change the color of the Blogger Navbar please refer to my Blogger tutorial How to Change the Color of the Blogger Navbar

Steps to Remove the Blogger Navbar

  1. Login to Blogger and select the blog you wish to change

  2. From the Blogger Dashboard go to Layout >> Edit HTML

  3. Use CTRL + F to find this code: ]]></b:skin>

  4. Insert the code below just before the ]]></b:skin> tag

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

  5. Use the Preview button before committing the change to see the Blogger Navbar is now hidden.

  6. When you are satisfied click on the Save button to save your changes

  7. Click on View Blog to admire your Blogger blog with the Navbar removed

Blogger Tip:
If you decide that you want to reinstate the Blogger Navbar you can do one of two things:
  1. Simply remove the code you inserted:

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

  2. Or comment out the code like this

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

Today I have shown you an easy trick to remove the Blogger Navbar. By adding a short piece of code to your Blogger template the Blogger Navbar can be hidden from view. I have also shown you what to do if you need to reinstate a missing Blogger Navbar.

Related Links
How to Change the Color of the Blogger Navbar
How to Increase the Image Size in a Blogger Blogspot Blog
How to Add a Print Friendly Button to Blogger
Set the Date of a Blogger Post to a Future or Past Date
How to Remove Blogger Labels Counter
Add a Follow Me Twitter Icon Button to Blogger
Making Money From Banners with Blogger
How to Get More Adsense Clicks with Blogger
Blogger Guide to Google Adsense Placement
Easy Ways to Put Banners on Blogger

Subscribe to Blogspot Blogger Guide Full RSS Feed

Subscribe to Blogspot Blogger Guide by Email

Print this post

Add To Google BookmarksStumble ThisFav This With TechnoratiAdd To Del.icio.usDigg ThisAdd To Reddit

Bookmark and Share


Post a Comment