Sunday, July 4, 2010

Removing Blogger bar with the new template designer

I'm not a fan of the navbar that appears at the top of all Blogger blogs by default.

It's well documented that you can remove it by editing your Blogger template to add the following code right before the "Variable definitions" section:

#navbar-iframe {
display: none !important;
}

I'm working on a new blog that uses the spiffy new Blogger Template Designer. The above hack still works, but the template I'm using has a bare spot at the top that's usually covered by the bar.

To fix this, find the following section in your template and change the value of margin-top from "30px" to "0px":

.body-fauxcolumns .cap-top {
  margin-top: 30px;
  background: $(body.background.overlay);
  height: $(body.background.overlay.height);
}

Voila, lovely bar-free blogging.

Update 12/1/12:

You can now turn off the header in Blogger without editing any code.

Just go to Layout and click the Edit link in the Navbar block.








Select the last radio button, Off, and confirm. Done!


No comments: