10 How to hide the Blogger Nav-Bar
Saturday, July 28, 2007 /

At the top of most Blogger blogs you'll see a navigation bar, which enables you to flick from one blog to the next (plus additional options when you are signed in). Many bloggers have used CSS techniques to hide the nav-bar. At first, I thought it may be against Blogger's terms and conditions to do this, but after reading this post by Kawaljit, I now think it may be okay:
The Blogger's TOS page makes no reference to navbar while Google representatives in the Blogger support group (nickname: Blogger Employee) have always ignored discussion threads seeking an official stand on hiding navbar. 
There's some hope now. Google recently organized a road show in select Indian cities to promote their Blogger platform. Ankit attended the event and requested clarity on the navbar policy from the Googlers present at the roadshow. They immediately called up their team based in Google's Bangalore office and confirmed to Ankit that it's legal to hide the navbar.
If you want to hide the nav-bar in your blogger blog, here's what you should do (these instructions refer to the "new" Blogger layouts templates):
  • Go to Template>Edit HTML in your Blogger dashboard and first back-up your template to ensure you can restore it if you make unwanted mistakes!
  • Next, find this line in the template: </b:skin>
  • Just before this line, insert the following lines of code:
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
 
You can preview your template to see the effect in action, and then save your template to save the changes for good. (Thanks to Testing Blogger Beta for this hack!).
I don't include this hack in my blog since I actually find the navbar rather useful (especially when editing my blog) but I can understand why others would want to implement it. As yet, I haven't been able to find clear clarification about hiding the nav-bar from Google/Blogger, so if you do use this hack, please be aware of possible implications!

10 comments:

February 22, 2009 at 7:15 AM Alit said...

Wow, I gotta try this method

February 27, 2009 at 2:49 AM
Anonymous said...

If Google wanted to enforce it, they surely have the knowledge and ability to do so. The fact that their server allows you to change this value -- and the fact that it's present in the template AT ALL, versus a non-user-editable inset inserted dynamically at page generation -- implies that it is considered user-modifiable text.

March 2, 2009 at 3:32 AM Comfort Joy Designs said...

Initially when I installed this code, it worked wonderfully...now only hours later, the Blogger navbar is back though the code is still intack. Hmmm...what's happening here?

April 8, 2009 at 9:08 AM Sihui said...

Thank you! I've been looking for this, and yours worked beautifully.

May 29, 2009 at 2:27 AM CLnekoo said...

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


it hid the navbar but..
now the words #navbar-iframe {
height:0px;visibility:hidden;display:none
}
are written like a filler for the space there D:.

i know i'm just putting it in the wrong place but.. i've tried putting it on different positions but the other positionns dont work. it's either the navbar doesnt go away or the words "#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}" are there +___+


how unlucky for meeeee

June 13, 2009 at 3:30 PM Sharad Saxena said...

hey.."me"

I think that you pasted the code after the line >/b:skin> instead of putting it "before" it..

July 24, 2009 at 6:42 PM Blogging Tips said...

I’m glad I read this. I rarely reply to peoples comments…not because I don’t like them…but because I thought it was self-serving.

Here is a simple step by step tutorials to create your own FAVICON easily on
photoshop cs version.
How to create FAVICON using Photoshop?

August 16, 2009 at 7:57 AM Fulgencio said...

Thansx a ton...wasted a lot of time, and finally got it rectified in a few secs thanxs to this tip

August 16, 2009 at 8:11 AM Fulgencio said...

Thansx a ton...wasted a lot of time, and finally got it rectified in a few secs thanxs to this tip

September 17, 2009 at 10:58 AM How To Sleep Better said...

Thanks, this helped me a lot! Actually, I am researching on this since I'm not "blogger" kinda stuff.. Thanks again.

Post a Comment