Tuesday, February 17, 2009

How to get rid of the Blogger navbar

bored_product_guy

There's hardly a Blogger user to be found who hasn't been irked by the navbar. True, it’s not entirely useless – it lets you quickly log on to Blogger and provides a quick customization link. But by just being there the navbar brings a generic look to your blog, which is enough to make readers not take it seriously. On top of that, the navbar allows any Blogger user to flag your blog! (Which, assuming you’re one of the good guys, puts you at the mercy of the goodwill of your diverse readership.)

Therefore it’s imperative that you hide your Blogger navbar, or at least know how to. In case you’re wondering, the Blogger Terms of Service doesn’t say anything about the navbar, so you’re good to go.

Hiding the Blogger navbar

1. Sign in to your Blogger account. This will take you to your Dashboard. Click on the Layout link of your blog.

2. Click on the Edit HTML link on the Layout page. Don’t worry, you don’t have to know anything about HTML! I’ll take care of the code.

Scroll down the Edit Template field and paste the following immediately before the Profile section as in the following picture:

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

You ought to add a comment (/* for example, this part would be a comment */), just in case you wonder someday why you inserted this particular line of code. Anyway, what this line of code does is hide the navbar – but this will leave some empty space above your header, or as in my case, leave less space and make your template look like it’s been trimmed on the top.

3. If there’s an empty space above your header, scroll up the Edit Template section and paste the following immediately within the curly braces of the body section and as shown in this screenshot:

margin:0;
top: -20px;
position: relative;

Once again, don’t forget to add comments. What we’re doing here is negatively positioning the body of your template to hide the area left vacant by the absence of the navbar. (Some bloggers have proposed solutions using the !important tag, but this might cause problems with screen readers and is therefore not advisable.) Please note that the margin section might already be defined in your template. In that case, just skip pasting the first line. Also, -20px might be too much or too less; tryout a few values to see what works best for you.

4. If your template looks like it needs a tad more space on the top (whether step 3 applies to you or not), just increase the margin a few pixels. For instance the following did the job for me:

margin:2px;

5. Save your changes by clicking on the big orange Save Template button beneath the Edit Template field. Click on View Blog -it should now be navbar-free! If you want to bring back your navbar, simply remove the lines of code you’ve added and save your template.

Happy blogging!

About the Author

bored_product_guy / Author & Editor

Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.

5 comments:

  1. THANKS!!!! VERY HELPFUL!

    ReplyDelete
  2. gσιηg тσ тяу ιт! :D

    ReplyDelete
  3. please please help me this doesnt work blogger changed everything there is no layout link on dashboard and edit html is in design and there is no profile in html PLEAE help me by updating your post!! please please please i want to get rid of the stupid navbar

    ReplyDelete
  4. @doggym hi, sorry can't help.. I haven't had any interaction with anything Blogger in quite some time now, and I'm absolutely out of my game here.

    Advice: If you want to blog and be at least remotely serious about it, I suggest you get a WordPress blog (NOT a WordPress.com account). Blogger simply doesn't have the chops for being a serious blogging platform. Trust me on this! And the earlier you make the change from Blogger to WordPress the better. Good luck, and sorry again for not being any help.

    ReplyDelete

Note: Only a member of this blog may post a comment.