Oct 1, 2008

Hiding Blogger's Navigation Bar

Blogger's navigation tool that rests atop the template of your Blogger is a useful tool to discover blogs or to sign into your Blogger account when you're visiting your blog. Unfortunately it is a useful tool but one that is a distraction to the overall look of your blog especially if you've taken the time to redesign your template and customize your blog. A lot of people who use Blogger just pull out the piece of code that displays Blogger's navigation bar but I like the purpose that it provides and worry about removing any future functions Blogger may possibly incorporate into the navigation bar.
Step #1: Copy/paste
As always make sure to Download a copy of your template and save it to your computer. Or if you don't feel comfortable editing your template create a test blog and try it there and then do it on your blog and you're sure you won't damage anything. If you look at the top of this blog you shouldn't be able to see it because I've inserted two lines of code into my template that hides the navigation bar until someone hovers their mouse over the area. This is the code you can copy/paste into your template:

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}


You have to place it between the <head> </head> tags in your template. A good place to put it that is easy to find is right after this line in your template:

/* Use this with templates/template-twocol.html */


Scroll down a little bit from the top of your template to find the line of code. Here are two scrceenshots to help you with the placing of the code.




Step #2: Preview & Save
Once you've pasted the code into your template click "Preview" and if you did it right you should get a successful preview of your blog without the Blogger navigation bar displaying. After that you can click save and continue with your blog.

h/t: Bloggeratto
Posted by Labels:

6 comments:

  1. hi again! thanks so much for stopping by my blog and sharing this cool tip of info. just applied it and the blogger bar has successfully vanished. thanks again for all the great info!
    ReplyDelete
  2. No prob. Glad you found it helpful.
    ReplyDelete
  3. It's sort of working for me. I am using one of the new templates, not sure if that may be what's causing the strange behavior, but the hover doesn't work. The bar is still there, but invisible. Any suggestions?

    What's up with no Texas blogs on the blog roll?? ;)
    ReplyDelete
  4. Hi Houston Garden Girl,

    Checked out your blog and it works he way it's suppose to work. You're not suppose to see the bar unless you hover your mouse over it. Instead of stripping the code out this method allows you to mask the bar to give you a cleaner, custom look without having to remove something that Blogger may ask you to put back down the line.

    The blogroll hasn't been updated in a while because I've gotten busy with some projects. Once I clean up that template I'll open it again.
    ReplyDelete
  5. Ah, yes, now I can see that it is working. I was on IE on my work computer where a lot of things on blogger do not work right. I just found your site yesterday, there's a lot of helpful information on it. Thanks for all the tips.
    ReplyDelete
  6. Thank you very much,Code works!
    ReplyDelete

I hope you find this blog a useful garden blogging resource. Sometimes I may reply to comments with my MrBrownThumb account or I may reply with my Garden Bloggers account. Hope this isn't confusing. If you're looking for gardening information check out "Google For Gardeners"

Subscribe to: Post Comments (Atom)