May 1, 2006
1.5.06 | Posted by
Avatar X
THIS TWO VERSIONS ONLY WORK FOR BLOGGER v2.0, IF YOU ARE LOOKING FOR THE v3.0 VERSION GO HERE
This is one of the most obvious hacks in this blog that you sure have not seen anywhere else. To see it in action just hover over the top of the blog and you will see it go.
This hack was born as a idea because one particular discussion over at Improbulus Blog, Consuming Experience that got me into re-thinking my position about the blogger navbar. More importantly, it got me to think how to comply to her not only in a more ethical way but also in a more functional way to what a Blogger blog should have and display without betraying my original position.
So, I did!
I requested help from Aditya over Gmail chat to code something for me based on a very simple concept:
Lets hide the blogger navbar but leave the decision to display it to the user and the visitor of the blog, leaving the blog navbar functionality intact.
So, after 5 minutes or so, Aditya coded something in CSS that solved the problem. Too bad that it was not crossbrowser yet (only Firefox could display it that way). So he went back and after 30 minutes some javascript had to be added and then voila! The "Hovering Peek-A-Boo Blogger Navbar" hack was born.
This hack as stated, is a crossbrowser version. Once the IE7 final is out, I will update this post to put the Pure CSS one. In the meantime this one will do the job.
Check it out:
1.- Go to your Template Editor (Dashboard > Change Settings > Template)
2.- Put this CSS code inside the
<style></style> tags: .show{filter:alpha(opacity=100);opacity:1.0}
.hide{filter:alpha(opacity=0);opacity:0.0}
3.- Put ths JS code script (don't forget it's tags) inside the
<head></head> tags: function sh(){
var e=document.getElementById ("b-navbar");
e.className="show";
}
function hi(){
var e=document.getElementById("b-navbar");
e.className="hide";
}
function att(){
var e=document.getElementById ("b-navbar");
e.className="hide";
if(navigator.appName=="Microsoft Internet Explorer"){
e.attachEvent("onmouseover", sh);
e.attachEvent("onmouseout", hi);
}
else{
e.addEventListener("mouseover", sh, false);
e.addEventListener("mouseout", hi, false);
}
}
4.- Finally change your
<body> tag for this one: <body onload="att()">
5.- That's it! You have your blogger navbar only when needed for everyone to use and see.
If you think this post should be more detailed please leave a comment.
Credits:
Code & Implementation: Aditya
Idea: Avatar
*Update
If you want to use a pure CSS version, you now can, just add this two lines of code where step 2 indicates:
#b-navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#b-navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
Then just save your template and republish to see the changes.
This pure CSS version only supports IE7,F.F 1.5-2-0, Flock,Netscape 8.0 and Opera.
if a user is still using IE6, Opera 8 or F.F 1.0,the navbar will be visible and unchanged.
Subscribe
Posts
Comments
40 comments:
As you can see here the comment form is inline, the backlinks are also inline they will be displayed if you click the back link button once this comment form is open, and they will appear below it.
IT looks better but I thought this was a tos violation?
Well, the way i see it, it is not, becuase the nabvar is intact in all it´s funtionality and original look, and every single user can see it...
that´s why i think this is the optimus blogger navbar hack, this way it don´t disrupt the look of your blog and you comply no onlty to a good blogetiquette (more on this later) but to your google contract. becuase as stated in the very last message from a blogger representative, in this case you have not:
1.-Removed your navbar,
2.-you have not altered it´s functions,
3.-you have not limited it´s use.
Thanks, for your Comment, if there is anything you would want to see, let me know.
P.D: cool profanation map!
Nice hack matey!
Can you get it to slide out though?
Would be much cooler.
it could be done. yes.
it gives me ideas about it. but for the time being i will pimp this hack in the meantime.
Welcome taoski. welcome.
@Avatar said: it could be done. yes. it gives me ideas about it. but for the time being i will pimp this hack in the meantime.Welcome taoski. welcome....
testing quoting system!
OH MY GOD!!!!
@Avatar said: OH MY GOD!!!!...
indeed!!!!
[img]http://static.flickr.com/41/139012109_627c86d96b_m.jpg[/img]
tried 2 fix it at http://fouroughfour.blogspot.com/
but it didn't work, mayb coz of my code, can u help?
@nikita: tried 2 fix it at http://fouroughfour.blogspot.com/
but it didn't work, mayb coz of my code, can u help?
i checked your blog crossbrownser.... i don´t know if you are messing me with or not.
Your blog makes scream every brownser....
well, if not let me tell you that your blog falls into the definition of the Bloated Blog on the Bloggetiquette Offenders.
It has bugs(i don´t even need to look at source code to know that) and you have made your layout of image composition.. but you really have not compressed and optiomized your images for display.
Even then, here at bloggeratto, i have a Zero BS policy. so if you want me to send me the code of your blog you can do so, and i will give you pointers by e-mail.
Thanks for your comment and i hope you don´t take this feedback badly.
Aww... don't be rude!
I ran through your code nikita, and though Avatar is right about the uncompressed images, I did notice that your blogger navbar has been repositioned at the bottom. I couldn't find the abovementioned code, so I presume you removed it since it was not working.
I'll ask you to put it back, and try hover your mouse at the bottom, rather than the top. See if that helps?
@aditya: Aww... don't be rude!
I ran through your code nikita, and though Avatar is right about the uncompressed images, I did notice that your blogger navbar has been repositioned at the bottom. I couldn't find the abovementioned code, so I presume you removed it since it was not working.
I'll ask you to put it back, and try hover your mouse at the bottom, rather than the top. See if that helps?
I am sorry if i read rude, i am bieng honest...i mean c`mon. i am at a 1mb at the thing don´t loads... in my modded too the max firefox? alpah 2.0 with fasterfox and cogfig mods!!!!
There are people telling me this blog takes a little to load.. and for me is blink flash..you can see the reson of my concern.
I'd find it more useful position:fixed-ed, as in "however far down you scroll, whenever you hover the top 30px of the window, up it pops". Before that it's not a feature upgrade, if perhaps (to some tastes) an aesthetic improvement.
Johan, quite a honor to have you here. and yes, it is a aesthetic improvement. just that....
I tried, but couldn't get it to work....probably because I'm new at this.
@Dan Morehead: I tried, but couldn't get it to work....probably because I'm new at this.
Not a Problem Dan if you e-mail your code(attached in a .txt file) i will add it for you if you want to.
good music taste. i like calexico and camera obscura too, i also liked the dada-eisenhower post.
Thanks! Where should I email it? --Dan
@Dan Morehead: Thanks! Where should I email it? --Dan
You can send it to Bloggeratto@gmail.com
send it in a .txt file..
cheers.
Thanks man, you're the best!
My pleasure Dan
:D
@waldwitcht: e-mail your template in a .txt file to Bloggeratto(at)gmail.com and i will put it there for ya.
Hey! I saw your reply at bloggerforum! Nifty feature you have here, but I followed the directions properly, and the series of codes just doesn't work on my blog. I'm gonna e-mail my template to you later. Thanks in advance!
Hello,
could you please help me with the code?
I tried a few times now but I always failed to get it to work. :(
Okay,I finally got it to work...great stuff,I really appreciate that ^_^
@Alastor:
I guess that means i am late to help you, even then, i am very happy you got it working.
Me too! Due to this hack,Blogger is imo twice the fun^^
Keep up the good work!
Oh,and thanks for your nice comment on my site.
My pleasure.
:D
Does this work for Blogger Beta? - I'm unable to locate the "style" tags in my template
http://sickbhoy.blogspot.com
Is it because I'm using Beta or why does he delete the Navbar widget when I make the above descriped changes to my layout?
I need help!
Same thing happen to me when i change it in beta?anyone help me and True Life?thanks
1.-No, this not works in Blogger v3.0. if it worked i would carry a update, i have made it wrk in v3.0, but i have not released it yet.
2.-the widgets get deleted becuase tis script is not worakble with v3.0
3.-if this happened in v2.0 then the code apllied is wrong. if you are using a emulated v2.0 template inside v3.0 (classco mode), it will not work either because the code running it´s not exactly the same.
if you got more questions, please visit the bordee message board, or write me direclty.
Avatar,can we use this code in beta blog?help!please!
Avatar,can we use this code in beta blog?help!please!
No more need to suffer, new version added.
:( it's not working.
I love it! Thank you! :)
Raquel
Dis you managed to make it work or you bailed out?, and if you did, well i am always a e-mail away.
Kerri-Ann
You are welcome, thank you for stopping by.
thank u dear,u r really superb
Post a Comment
Welcome To Bloggeratto. In here you can post any kind of comment you want. Seriously, Go ahead.