Tuesday, January 18, 2011

How to Hide the Blogger Navigation Bar

The navigation bar is that little strip above your blog that says "next blog" and "sign in" along with a couple of other things and the Blogger logo. It looks like this:

Because my blog has its own domain name and since I have third party cookies turned off, it always tells me to sign in, even when I am signed in, I decided I wanted to hide the navbar. From what research I've done, it isn't against the Terms of Service to hide the navigation bar. There are two ways to hid the nav bar.
  1. Adding CSS. Go to the 'Design' tab. Click on 'Template Designer.' Go to the 'Advanced' tab, scroll down to 'Add CSS' (it will be at the very bottom). Copy and paste this: #navbar-iframe {height:0px;visibility:hidden;display:none} into the CSS box. Click 'Apply to Blog.' 
  2. Adding HTML. Go to the 'Design' tab. Click on 'Edit HTML.' Scroll down or use Ctrl + F to find the tag </head> in the 'Edit Template' box. Copy and paste this:
    <style type='text/css'>
    #navbar-iframe {
    display: none;
    }
    </style>

    just before the</head> tag. Click 'Save Template.'
Good luck!

EDIT: Now you can hide the navbar without editing the HTML. Simply go to the control panel/overview for the blog you want to hide the NavBar. Click on "Layout." In the Navbar box in the upper right hand corner, click on "Edit." A little box will pop up. Select the bubble next to "Off" and click "Save."

No comments:

Post a Comment