Peek-A-Boo Blogger Navabar
If you ever wished you could do something with the navabar, but didn't really want to eleminate it altogether, I think Avatar has a solution for you. Look at his post Blogger v3.0: Hovering Peek-A-Boo Blogger Navbar for simple to follow instructions. He even has visual aides!!! You put a couple of lines of code:
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}between <head> and </head> and before the beginning of the CSS section. Like I said, he has nice pictures that show exactly where to put it.
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
After it is in place, when you hoover your cursor over where the navabar should be, it will appear. Magic!!
Labels:
Blogger Beta,
Design,
Hacks,
Navabar
29 Comments:
Thanks Annie, and the blog would look even better sporting it you know?,
:P
@Avatar, I actually was thinking about doing that yesterday, and this morning I tried. But, I can't get it to work...no matter where I put the code. Any ideas?
really? it should be placed in the part stated in the pics.
but remember that is not the code from the picture and it´s hte one from the post.
it should be #navbar-iframe and not just #navbar..
i find it very weird that his to happen to you of all people, i have already seen it in place in over 50 blogs so far..
revise the cde and write it by hand if neeeded, if that fails, then hand me over your template over the mail and i will sooo fix that.
@avatar, I'm on my husband's laptop right now, and have tried it again. This time the navabar completely disappears...except when I hoover my cursor in the upper right hand corner where the the links to customize, help, etc...the cursor changes from the arrow to the hand...meaning that I can click on it. When I click there, the area comes up where I can edit my template. I'm going to send you my template so you can take a peek. I would really like the navabar to appear so I can easily go to the editor. So, I'm sending you my template so you can take a peek. BTW, my husband uses IE...don't know if that makes a difference. I use Firefox on my laptop.
@avatar, back on my laptop, and it is working as it should! Thanks for a great hack.
great to see everything got sorted out annie.
@avatar, yes, I was glad to get this great hack up and running. Thanks!
I'd love to use this in my blog, and I'd love to see those pictures you're talking about, but that site is limited to "readers" of the blog and I haven't been invited.... any ideas?
Thanks in advance
@koos, I don't knowwhy avatar's site is for invitation only. It wasn't last time I visited.
But, you can copy and paste the code in my post into your template. I put it right before this in my template:
body {
but, you could put it anywhere between <head> and </head>
Good luck!
Wow, this totally has to be the easiest thing I have ever tweaked on my blog. Installing it was a breeze. Thanks for sharing!
This is so great!
Soooo easy.
Tnank you !
Thanks Annie. This was a very easy bit of code to implement. Very useful!
TV Stream
Free online TV blog
http://tvstream.blogspot.com
Hello, I know this is ages after everyone else but I just added the code I was really happy it worked.
Then I find that on IE7 there's the problem you talked about with Avatar.
It's not there, you hoover over it the pointer changes but no navbar and boom ... flagged blog (okay I'm exaggerating) you get what I'm saying though.
I've removed it again just in case someone clicks the wrong thing in IE7 though.
Cool hack, but I'm worried someone in IE7 will flag my blog by accident. I debating whether to leave it or not.
http://bloggeruniversity.blogspot.com/2006/10/peek-boo-blogger-navabar.html
Thanks. Really Nice Tip.
Great hack! It works great, thanks so much!
Annie this hack not working for me!
@webevader, I don't see the code in your template, so I don't know where you put it exactly...if it was in the right place.
Looks like it still leaves the gap at the top of your screen. May as well leave it up there in full.
this one is one of the best ....thanks alot annie
Does this code need to be within the [style] section of your code? I have not seen the use of opacity in CSS. This must be a more recent tag.
@Paul, I put mine right before:
body {
Nice to know that there's a possibility to do it. But it's pretty uncomfortable for the user - I hate when things pop up accidentaly every time I movie my mouse.
i definitely use this in future its nice information
works perfect on one of my other projects. sometimes it just needs two rows of code and you're done and sometimes...it needs a wall of text ;)
Thanks once again! So easy! Your tutorials are invaluable!
Thank you for the tip - i love playing around with opacity :) if i have the time to do it...
This is looking cool. It made me to thing again of showing navbar on my blog Decryptoblog.