Hide your blogger navbar

Introduction: In a blogger blog (...blogspot.com/) you will always find that you get a navigation bar at the top.
I don't think everyone will want to get rid of it, but if you want to personalize your blog a bit, you may think about throwing it away.
How to do that? Well, it's rather easy to just get rid of it, but there are a few additional things you could do to.

Just get rid of the Nav bar: This is really easy. Follow here step by step and you will have no navbar.

1. Sign in to blogger, and go to "dashboard".
   
   
2. Click on "Layout" for the blog with the doomed navbar.
   
   
3. Select "Edit HTML"
   
   
4. Select "Expand Widget Templates"
   
   
5. Now either press 'Ctrl' + 'f' and search for 'body {'.
   The image shows how this can be done in firefox:
   
   
   Or you could just scroll down.
   The "body" element is the first one in the CSS portion of your blogger template.
   It's not that far down.
   
6. Now just add the following code just after the body {....} css element
   
   #nabvar {
   display:none;
   }
   

But if you don't want to go all the way, there are some ways to just hide it a little. Some people are scared of Google taking it out on them if they don't follow the rules. Well, this is how you do that...

Come and go: In this example you make the navbar disappear while until you hover over it with simple css.

I found this bit of code on various people's blog and so it's hard to credit the original author. It's not me, and I am sure it would have taken me some time to figure it out, being a non-nerd type. Try it. All you need to do is add this code where I told you to add the code mentioned above, just below the body {...} section in your blogspot template code.


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

Reference: This bit of code seems to have been plagarized by loads of people in endless tutorials. I tried to find the oldest version of it that I could.  This seems to be the oldest post that I could find on this peace of code.

Come and go a little: So, this is my own little edition. Most of what I learn ends up being just like this. I find an interesting thing to try, try it, and then try to change it and understand how it works (or at least have an idea how it works.) How I learn for guiding influences a great deal how I learn for computers. Both are related: I want to understand how things work. It makes me a successful guide, and makes blogging (and other 'computer' related things) FUN!

So, why not just play with the Opacity and see where it takes us:

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


Now it's not totally hidden ever, but just get's a little see through.

If you want to learn more about transparency, visit these pages:
www.w3schools- css image transparency and
www.w3.org - css3 color - transparency.