Jun 18, 2010

Re-branding blogger: removing the blogger navbar, attribution and other Bloggerisms from your blog

I'm often asked by clients whether the website I make for them using blogger will have Blogger branding on it. The short answer is "no," and the long answer is "not after I spend a few minutes making all that disappear."

So the deal is, Google doesn't make it super easy to remove the navbar, the "powered by blogger" footer, or other bloggerisms that tip a user off that they're on a blog.

But they do make it kind of easy, using CSS. Just add this custom CSS to your blog. Some of this stuff won't work if it's in Blogger's easy-to-use "add CSS" feature in the template editor, so just go into the HTML and put it below all the other CSS:

.blogger-clickTrap, .post-feeds, .blog-feeds, .blog-pager#blog-pager, .widget.Attribution#Attribution1, #navbar {display: none;}

Here's what each of these selectors is (so you can omit the ones you want to leave in):
  • .blogger-clickTrap is the thing that gets in your way when you're trying to use a browser's inspector feature to pick apart your layout and try out CSS changes. If you don't understand what that means, then you can omit this from the above CSS (and remember to remove the comma after it as well).
  • .post-feeds and .blog-feeds are the things that create that weird "subscribe to (atom)" thing.
  • .blog-pager#blog-pager is the thing that will put things like "next entry" and "previous entry" under your articles. It's for when you want your site not to be paginated like a blog, or if you want to trick Blogger into acting like a normal site by telling it to show only one post on the home page, and then making a post out of your home page, and making sure it's always dated as the most recent post.
  • .widget.Attribution#Attribution1 is the thing in your footer from which you can't remove the words "powered by blogger."
  • is the Blogger navigation bar at the top of your screen.
Now you have to realize, you've removed some pretty great functionality from your site and you should put it back - on your own terms, and with your branding:
  • A Search This Blog button. It can be added as a "Gadget" in the Design: Page Elements panel.
  • A "subcribe" or "follow" feature. "Follow by E-mail" is what you need. It's also one of Blogger's handy Gadgets and does a much better job than what we're using it to replace.
  • If you have no form of navigation, and you have more than one post, you stranded the user on one page by removing the blog pager thing. So I recommend tagging each of your posts with at least one of your categories, and then making yourself a "Tags" gadget, either in the form of a cloud or a list, and using it as a menu.
Now as for being on a blogspot subdomain, it's easy to remove "blogspot" from your domain name, by using Blogger itself to associate your blog with your custom domain. You can ever buy it right from Blogger. It's in the "settings" tab somewhere.