There are some out there that do not like the blogger navbar. Mostly because it makes their blog look like, well… a blog. There are tutorials on how to remove it completely from your blog somewhere floating out there in the great chasm that is the internet. Or you can just find it here.

Personally I like the blogger navbar but that’s because I use it all the time. It’s useful to be able to navigate through a blog while I work on designs. I honestly don’t really notice the blogger navbar, it’s just there. I do however notice when it is entirely missing on someone’s blog. Heaven forbid I actually have to get back to my blogger dashboard by typing blogger.com into my browser. But it’s still annoying.

So someone somewhere came up with a lovely solution. It’s a fading Navbar that shows up when you hover over it with your mouse. Is that not the best idea ever? Okay maybe not the best idea ever but it’s still a good one and it makes me happy.

The original tutorial for making your blogger navbar fade is found at Spice Up Your Blog. He has many great blogger tutorials. Including one where your navbar appears at the bottom of the blog. I don’t know why you would want that but hey it’s there.

So here’s the long and short of it.

Oh wait its SUPER short.

1. Go into your Design section of your blog.

2. Click on edit HTML

3. Find this code

]]></b:skin>

(The easiest way to do this is to Press the Ctrl and F at the same time and a little search box will pop up at the top of your browser window. Type in and it will take you right to it.)

4. Copy the grey code below and paste it into your HTML just BEFORE the code you found.

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

5. Save your template.

You now have a Blogger navbar that fades in and out.