Oct 6, 2011

Tip: How do I remove the Blogger bar at the top of my site?

This is, far and away, the #1 question we're asked when people see the work we've done with Blogger. "How did you remove the Blogger bar at the top of the site?!?!"

The secret: we didn't remove it, we just hid it!

Method #1
Be forewarned, this requires that you look at the HTML code of your Blogger template.

Go to the Design tab in your Blogger Dashboard, and click on "Edit HTML". Search the page (ctrl-F) for "body {".

It'll look something like:

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)
}

On the line below that code, paste the following:

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

Save the template by clicking on the button at the bottom of the page and you should be all set!

Method #2

Go to the Template page in your Blogger administration panel, then click the "Customize" button. Click on "Advanced" in the options, scroll down in the secondary list to "Add CSS", then add the following code:

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


Then hit the "Apply to Blog" button in the top right corner and you're all set!