Oct 30, 2006


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.



72 comments:

clazh said...

awesome gonna try it out soon

Avatar said...

@Clazh:

yeah, have a go at it, i will be looking over.


Oh, and thanks for visiting.

louis said...

Omg....Avatar,after all,this is what we waiting for!!!thanks guy...Wow....have a nice day!!

louis said...

But i wish that IE7 can fully support,hope so..

Avatar said...

@luis:

yeah, don´t worry i already requested pro-help so i can offer a full cross browser version,

And, yah am quite a cool guy i guess, how about you returning the favor by adding it to your blog uh?, and maybe a favorite at techonrati if you got one..

:P

kidding, have a nice day you too.

clazh said...

Hey cool its working ... is it possible to implement inline Comments like you have without using javascript on individual posts ?? the problem is I hate javascript and so do the search engines :(

clazh said...

By the way how do I subscribe to your Comments RSS ??? You are using blogger beta right ??? I hate going to websites to check for comments.

Anonymous said...

I've been waiting for this one! =)

Unfortunately, as you mentioned, everything is fine in Firefox, but it stays invisible in my Opera 9.1 and IE 7.

Anonymous said...

That is WAY cool! Exactly what I've been looking for in agaes. Thanks for this. and even if it doesn't show up on IE, that's fine with me at I've mostly switched to Firefox anyway.

Anonymous said...

This is cool. Incorporated that to my blog.

Anonymous said...

I have implemented the NavBar hack and what I notice on my blog (and no other so far) is that the brightness changes with the disappearance of the NavBar. If I hover over the NavBar, my page brightens up again. Very strange. It also signed me out of Blogger.

I also would like to use your inline comments. The one I'm currently using requires javascript and then if a person wants to comment, they have to go to another page. I would like what you have. :)

Thanks for the hacks.

D

Avatar said...

Clazh

About the inline comments thing, i don´t think it can be done any other way, i mean i may not know to code but i know how to read code, so i don´t think it can be done without a js script to control how it is generated into the template..

I do not sport a comments feed, but i will implement one very very soon, and i will let you know of it by mail.

Alastor

It does show in opera, you are just hovering to fast.. it will show if you hover the borderline, and even as invisible it is also active.

the IE7 version is invisible but active, in any other browser, with a gecko or mozilla base it must show perfect: flock, f.f. netscape, mz 5, etc.

And glad you like it

Swipe:

Glad you like it too, and remember, it does show in opera, and other mozilla or gecko based browsers.

Soumyadip:

Thanks.


Now, to all, if you could give this poor man a link, that would help a lot.. :P

Anonymous said...

ya,i did use it in my new blog.You really cool,maybe because busy?I love to be friend with you!(chinese people said:"have one more friend,better than have one more anemy").Hope i can always hear more good news from you man!

Panda said...

That would be neat if it worked in Wordpress blogs. I came up with a Platypus script to erase the navbar from view on my own browser, but it would be nice if others had the option to see it or not.

Anonymous said...

Implemented this.... in my new Blogger beta blog. :)

Anonymous said...

And Blogger Beta should seriously incorporate an inline comments from in place of the usual pop-up comment form.

Avatar said...

Debra:

I have seen your Blog and i don´t notice what you describe, in any way, that could be anice after effect...

about the inline comments, this is being worked on by another hacker right now, so this is just a metter of time for youto have it in v3.0

thanks for the comments

Loui$$

yeah, it is a proven fact that i am cool, anyone can be my friend and you can expect more good news from this blog every single day,there will e new posts in some hrs.

Panda:

Hey, long time no see, and it could be donde you know, it´s only a matter of doing it.

thanks for stopping by

Manas:

yeah, i have seen it, and i am looking for what you asked so i don´t forget, now, about the inline comments, yeah it should be, but i don´t see it happening.

but that is what the Bleet is here for...

so, as i said to deb, this will be released soon, and i will let you know of course.

Anonymous said...

Looking forward to the inline comments form for Blogger Beta. :)

Anonymous said...

:)

Anonymous said...

OK, I have linked to you now.. :)

Avatar said...

Manas

Yeah me too, that is a cool hack too, and thanks for the link.

Waz

:D

Anonymous said...

Avatar,your search box are not functioning!i wan to search your blog but the box are disable.Just infrom you.have a nice day!

Anonymous said...

I managed to get adsense ads below my post title. :)

Anonymous said...

Ahh... new problem..
How do I display the ads only on my post page?

In other words what is the equivalent tag of ItemPage in Blogger Beta?

Anonymous said...

Thanks a lot

Avatar said...

loui$$

yeah i know, i am seeing my option to renew the funtionality of it.thanks

Manas

should not be much of problem, i wil look into it if you don´t find a solution.

S.B-Shrestha

You are welcome. and i stopped by your blog, looks great.

clazh said...

hey there I added you to my blogroll but I cant see any blogroll on this blog. Maybe I need thicker glasses

waz said...
This comment has been removed by a blog administrator.
waz said...

hi avatar! :) howz the hacking going on!?! know what, about everybody has been asking me the same question! i've actually found the pic on the internet some time last year n it's only now that i'm playing around with it...i don't remember where i've downloaded it from otherwise i'll have included a link...did you want a copy of the original one?

Avatar said...

Clazh

very good sarcasm, i will only said i am working on it.

oh and that your link from your comment leads to a bible study website.


Waz


It´s going great, and yeah i liked the art style that is all, i thought that if was you who drew it we could do a comic (i also write comic scripts)

just that.

:)

Anonymous said...

Yo whattup good hack... not sure if this is what was supposed to happen... i'm using tictac template on blogger beta... and the navbar just disappears... there's a gap bw the window and the top of the blog now (which looks better than the navbar) but its as if the navbar is invisible, b/c the peekaboo effect doesn't happen

oh well still an improvement!

check it @
http://www.deathbyriskaversion.blogspot.com

Anonymous said...

Avatar,good new for you,i have the solution for the adsense code to put in between the post.Check it http://bloggingsecret.blogspot.com/2006/11/ultimate-adsense-guide-insert-adsense.html

all the best guys!

Anonymous said...

mike

Thanks, i see the peek-a-boo funtionality in your blog in both operan and mzoilla based browsers (flock,netscape, firefox and ms5)

If you menat that it just go away in IE7 without doing nothing, you are right that is because IE7 don´t supports opacity in the CSS code, but it does supports alpha channles now, so it gets hidden BUT active in the template.

if i manage to get it working in v3.0 for all browser in full capacity i will pdate this post.

now, if you want to reduce the space left by the navbar you only have to adjust the main height margin in your css.

Loui$$

That is great, i know of someone that was also looking for that and who may have seen your post.

good news to me?, yes in the sense that whatever makes someone happy with it´s blog makes me happy, but i am not exactly a adsense supporter.

Thank you for reporting, i know this helpful for a lot people too.

Anonymous said...

Sorry dude, but this not rules how it must. I'm use the IE6 and the navbar remains hidden but those functions still actives like a "ghost".

Try to depurate your Hack because I think it's a very good and usefull hack for Blogger's users.

Avatar said...

eme doble

yeah i know, it´snot that i don´t wanna support IE7, for the contraire, but blogger v3.0 it´s a little pesky.

Ah y saludos a españa.

Anonymous said...

Thanks for the great hack!

One odd side effect tho: when I rollover the nav bar it bolds all of my text! (At least on my Mac running Firefox). You can check it out here: Blogger 60

Doesn't really bother me, just strange.

Avatar said...

ah, looking good, i like the blog, and i like studio 60 too.

and the bold thing must be a MAc-only thing.. i don´t see it on my side in any browser.

thanks for visiting eric.

Anonymous said...

Thanks for visit my blog in person. I appreciate your blogger hack.

Zohar Manor-Abel said...

Thank you for this tip!!
And it does work perfectly in Safari OS X...

Avatar said...

Zizukabi

A Pleasure. glad you like it.

Zohar

You are welcome, and it is a little bit more than a tip.. ;)

Anonymous said...

cool....... i use it too in my blog

http://just4kelana.blogspot.com


btw, my other blog don't display the navbar, suppose because some hack that i use......

do you know the code to show it? so i can use it with this hack too........

Vince said...

hi, tnx for this great idea. I was able to apply it with my own blog http://recedo.blogpsot.com

More power!

N A Z M I E S K I said...

Nice hack Bloggeratto ;)

La Sousa! said...

Tried it and loved it: thanks for sharing!

Miss & Mister KinkY said...
This comment has been removed by the author.
Emmanouil said...

It's working sweetingly!
Thanks a lot dude!

Tony said...

Sweet, thank you very much!!!

Tony's Daily Blog

SOLOMONSYDELLE said...

thanks so much!

Nina Victor said...

It´s great!
Thank you very much! :)

Anonymous said...

yo checkitout... I set the rollover opacity to 0.5 as opposed to 1.0, and now when it pops in it's faded back...


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

www.freshflicks.blogspot.com

Avatar said...

Thank You VERY MUCH for your comments, i read them all and try to answer them all so keep them coming.

Chris said...

Man...WAY Cool!!!!!

Thankz!

Elisa said...

Thanks! So cool!

Anonymous said...

Avatar for PRESIDENT!!

Mel said...

ah, thank you so much! I tried it and it works...

Avatar said...

Thank you to all comments, glad you like it.

and on the President thing?, yeah why not.

T'ma said...

Hello!
I have another solution with 1-click.
Check my blog http://www.homoludens.su/2008/06/navigation-bar.html

levian said...

how do i check which version of blogger am i using ?? i tried putting this 2 lines, but nothing happens. what should i do next ??

luisj said...

Yeah.
Great!
Thanks.

Anonymous said...

@Levian: i see you have figured it out. :D good.

Bridey said...

Thanks, that looks a lot better!

Zed Gordon said...

great, thanks so much! just starting my photography blog, thanks heaps again, now it looks much nicer!

regards

Rajesh N Butpur said...

nice tips

blogger-godown.blogspot.com

Alexandra Mikaela - Awareness Warrior said...

Thank you so much! Very clear and simple! The result is fantastic!

Javier M. Sotelo said...

Gracias por el truco.

Cristina said...

Great stuff, thanks!

Anonymous said...

Thats work.. Thnaks

Shey said...

Love it! Thanks so much. :)

Nick said...

Absolutely love this post! So helpful!

works on my site great!

http://www.6Laughs.com

Leo said...

great hack that i'm using on all my projects!
i've written a short post about this hack as a thank - you:
http://reactiveblog.blogspot.com/2010/12/hovering-peek-boo-navbar.html
check it out
leo

Avatar X said...

Thanks a lot. Glad all of you like it. And Bloggeratto will once again resume to activites soon. In the meantime you can check out Appatic.com for my other Blog.

Leo said...

It also works completely in safari and google chrome, and of course in the new Firefox 4.
Great hack, I'm using it on all of my blogs since a long time!
Cheers!

Post a Comment

Welcome To Bloggeratto. In here you can post any kind of comment you want. Seriously, Go ahead.

Lijit Ad Wijit

Categories

Blog Archive

Followers

Web Statistics