--

Sunday, June 12, 2011

Make your Blogger Navigation Bar disappear!

Hello everyone! I will be sharing all of the little code/html searches I have been doing-- just in case anyone else is interested.

I've been trying to make my blog look more like a website lately and noticed the blogger navigation bar at the top really takes away from the aesthetics of the entire blog sometimes. So let's make it hidden! (But if you hover at the top, it still shows up :) ) It's really easy.

Go to dashboard, then design.
Click on the tab to edit html next to posting elements.
There is a check off option at the top right of the text box that says expand widgets. Click this before searching for:
body } (press ctrl+f to find it faster)
A couple search results show up but the first "body" it finds is usually the right one. If you scroll up, there should be a dotted line like so ----- there indicating a break.

Once you find this "body", copy and paste this code right ABOVE this "body" so it will be the first thing under the dotted line.
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha
(Opacity=100,FinishedOpacity=100)}
  
Save and view your blog! It's cleaner and more professional this way. :)
Also, make sure your code is two lines after you paste it in. The second and third line shown here should be stuck together but blogger kept running it into my side ads. So once you have pasted in the code, leave only one space between "alpha" and "(opacity..." like the first code line.

Enjoy!


Photobucket Photobucket

3 comments:

  1. Wow thanks! I'm going to do that!

    ReplyDelete
  2. Thanks for sharing! :) I spent some time googling for trying to do this, and ended up on your post. It was very helpful!

    ReplyDelete

All thoughtful comments are appreciated. :) Thanks for being here!

Blog Design by Caked Designs