Blogger v3.0: Hovering Peek-A-Boo Blogger Navbar

You asked for it in over 100 e-mails so far, and you have asked me about it in the chat and in this very blog for it. and not last, it remains the most popular post in Bloggeratto, over 100 blogs use it in v2.0 and now you wanted it for v3.0 so here it is:

1.-Open Your Layout Settings
2.-Go To The Edit HTML
3.-Put This Two Lines Of Code Inside The CSS Section That Is After The Color Parameters Arrays Of Your Blogger v3.0 Template And Before the /head Code Tag:

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

Need more guidance to do it? ok, just look for this spot in your template Before the /Head code tag in the CSS section:



And the put it there so it can look like this:



4.-Save Template
5.-Look At Your Blog

That is it, just two lines of code to do it this time, now, i must reiterate, this code only works for Blogger v3.0, if you want any of the 2 versions for Blogger v2.0, then you only need to go to this post:

Blogger v2.0: Hovering Peek-A-Boo Blogger Navbar.


If yo still need to check how it looks in v3.0 first you can look at the v3.0 testblog:

testabloggerato v3.0

Why is this hack great?:

-No more need to erase the Blogger navbar without it getting in the way your blogs looks and works.

-You support Blogger default features unchanged and that makes it better than erasing it..

-It really looks cooler.

Now, more about this version, given the nature of the new Blogger and that i am no coder, i was not able to make the old code to work in Blogger v3.0, so i resorted to update this CSS code that is a update of the never released CSS version (until now) for v2.0 that Aditya also coded for me, the reason i never released it before is because when IE6 was out, the CSS version didn´t even hide it, much less worked for it.

Now it will hide it for IE7 and remain active, but will not offer the Peek-A-Boo funtionaly for it.

This is because Opacity didn´t make the cut into the new IE7 CSS support, so iguess maybe next year.

This CSS hack works for any Mozilla based Browser and Opera, i have not been able to check it in Safari, so if any one could check it for me and let me know, i will add it here.

So:

Basic Support: IE6 & IE7 (Hidden & Active=It is there invisible)
Semi Supported: Opera 9.0 and up. (a litle flickery, and can be activated by clicking on the search field too)
Full Support: Firefox, Iceweasel(linux),Flock, MZS6,Netscape, Safari & camino(linux)

If any other hacker can make the old version (css/js) work for v3.0, please let me know, i will still try to convince someone to help me out, if that happens this post will be updated.


*Update-09-11-06*: thanks for the support of this hack and to those over 100 already using it hope you enjoy it and pass it along, and for those other 15 people that have linked to it i also thank you.