Completely disable and remove Blogger Navbar with body HTML comment tag!?

Of all Blogger hacks out there, this is surely one of the strangest of all. You will see why in a few minutes.


The purpose of this particular Blogger hack is pretty darn simple. It is to help bloggers using Blogger to completely get rid of the ugly looking Blogger Navbar that normally can be seen at the top of each Blogger blog.


But before we take a look at that strange Blogger hack, you should first know that most bloggers that are using Blogger simply hid the Blogger Navbar from view. This is accomplished with some simple CSS rules. Let’s see how they do this on their blogs.


How to use CSS rules to hide Blogger Navbar from view


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

As you can see, the above CSS rules force browsers to hide the Blogger Navbar from view. When bloggers apply the above CSS rules on their blogs, the Blogger Navbar is still there on their blogs but you won’t be able to see it because it has been purposely hidden.


Personally, I do not like this particular trick at all. This is because search engines such as Google frown upon the use of hidden elements and by hiding the Blogger Navbar from view; one might just put his or her blog in jeopardy.


If your site is perceived to contain hidden text and links that are deceptive in intent, your site may be removed from the Google index, and will not appear in search results pages. [Via Google Webmaster]

That is why I prefer the other, little known Blogger hack that can do so much more than just hiding the Blogger Navbar from view. Let’s take a closer look at this Blogger hack and soon you will understand why I deem it strange.




How to completely disable and remove Blogger Navbar


I first saw this particular hack at bloggerplugins.org. According to bloggerplugins, you have to place an innocent looking HTML comment tag somewhere in your Blogger template.


In the Template Code find <body> and just above that add the following Code.

<!--<body>-->

Strange, isn’t it? Hang on! It’s about to get even weirder!


What happens after we add <!--<body>--> HTML comment tag?


As if by magic, the whole Blogger Navbar will disappear for good! Totally! If you opt for this particular Blogger hack, you no longer need those CSS rules (as shown earlier)!


As what had been warned by bloggerplugins, we will no longer see those convenient Blogger Quick Edit iconic links on our blogs. Under normal circumstances, we would be able see those iconic links on our blogs after logging into Blogger.


Here’s the weird part that I have been talking about earlier where many have failed to see. If you take a look at your live page source and go back to where you put that HTML comment tag on your Blogger template, you will see the following line:


<!--<body> <b:section id="navbar" class="navbar" maxwidgets="1" showaddelement="no"> <b:widget type="Navbar" id="Navbar1" locked="yes"/> </b:section> -->

Very strange! It doesn’t make any sense at all! The <!--<body>--> HTML comment tag is just a God damn comment tag. It is supposed to tell browsers to ignore the <body> tag! I don’t know how but the <!--<body>--> HTML comment tag is able to ‘trap’ and completely disable the Blogger Navbar!


How the hell did it do that?


Can we completely disable and remove the Blogger Navbar?


This has been discussed ever since the time of Mahatma Gandhi and it took an employee of Blogger to settle this once and for all. According to the Blogger employee:


While we don't recommend or support the removal of the Blogger navbar, there is nothing in our Terms of Service that explicitly mandate its use.

I'll let you draw your own conclusions from there ;-) [Via Blogger Help Group]

Hey bloggers, do you get the message?

Subscribe via RSS or Email:

Related Posts


26 comments:

GreenLava said...

Come to think of it, it does make sense. It looks like Blogger adds the navbar section by injecting the code right after the first [body] tag. By commenting the dummy body tag, it 'traps' both the body and section tags inside a comment tag. Brilliant trick!
Now you'll have to excuse me, I'm going to fix my navbar :)

homebiss said...

Hello there Greenlava aka Blogger Sentral,

Yes, I think we both know how the hack works now but the mind-boggling question is; how did bloggerplugins found out this little trick in the first place?

I refuse to believe that bloggerplugins found it after countless trials and errors. I refuse to believe that. I'm more inclined to believe that bloggerplugins found this little trick after talking with some Googlers or Blogger employees. Bloggerplugins could even possibly had stumbled upon this trick after visiting Googlers or Blogger employees' blogs.

In another word, Googlers or Blogger employees know Blogger inside out. This particular trick could only have come from them.

The question is; who leaks out the information to the wild?

alan said...

hey...thanx for that valuable information.

homebiss said...

@alan,

No problem.

Anonymous said...

Just tried to do this, it previewed beautifully, but when I tried to save it to my blog, I received an error message basically telling me I "couldn't do this".

Google's on to us.

homebiss said...

Anonymous,

Are you sure?

It is still working perfectly fine for us. Can you show me a screenshot of that error message?

Chris Rowbury said...

I just had the same problem: the Preview shows that the edit works, but when I come to save the HTML, I get the message: "We're sorry but we were unable to complete your request"

homebiss said...

Chris Rowbury,

Try saving your Blogger template with the old Blogger interface.

Fladonis said...

Hmmm, as much as i try to understand most of these terms, most have worked for me so far. Am off to try this one.

Asho said...

Do google prefer removing blogger navbar?? do my blogger blog will get deleted if i remove navbar??? please help me...

homebiss said...

Asho,

Google or Blogger of cource prefers bloggers to use the navigation bar but so far I haven't heard of blogs being deleted or removed because of navigation bar disablement.

technetsavvy.com said...

I'm getting a bx code error while saving the template, don't know what's wrong.

homebiss said...

technetsavvy.com,

Please save your template in the old Blogger interface.

Mohit said...

When I place above <body..... it doesnt allow me to do that. I showed me an error message. Is it so that blogger doesn't allow to remove it.

My blog: http://www.forex-crunch.blogspot.com

homebiss said...

Mohit,

Try again but this time, please save your Blogger template with the old Blogger interface.

mm said...

hi did not fine it?

homebiss said...

mm,

What is it exactly that you couldn't find?

~~Tman~~ said...

i like using this on blogger rhank you again :)

Fab Frugal Mama said...

Worked for me perfectly! Thanks!!

JajQo said...

trick as hell! thx work perfect ;)

b1nary atr0phy said...

I had to use a space before any character within the inner angle brackets i.e. to avoid the notorious bX- error upon saving.

Even the single character 'b' without that space would trigger bX for me.

health said...

Thanks for the information. It made me remove the nav bar and also helped in realizing the trick.Informative post!

Oolalai said...

Wow! #nuffsaid

Marc Ridey said...

Did you know you can turn off the navbar from the administration UI. Go to the "layout" tab, click "Edit" on the navbar widget and select "off" on the navbar style and save. It's gone. No need to edit the template.

dailyhealthylifestyletips.com said...

thank you for this. @ Marc Ridey.. i noticed that your tip will work but there will still be gap left on the space that the navar is suppose to be.

homebiss said...

dailyhealthylifestyletips.com,

Thanks for the feedback.

Post a Comment

  • Commenters are encouraged to leave comments via OpenID but if you have problems in leaving one via OpenID, please refer to this excellent guide.
  • Comments that add tremendous value to the blog post will not only get approved but also will be personally tweeted (learn how!) by the blogger behind this blog, giving commenters the opportunity to get even more traffic and gain even more exposure to their sites or blogs.
  • Comments that have links in the bodies of comments will never be approved.
  • Preferably comments should be made in English but comments in other languages are also acceptable.