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.
Monday, May 01, 2006
Hovering Peek-A-Boo Blogger Navbar
Subscribe to:
Post Comments (Atom)
46 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
Doesn't work for me. It displays the java script on top of the page :(.
Doesn't work for me. It displays the java script on top of the page :(.
@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.
However mean your gold in wow life is,buy wow gold meet it and live it ;wow gold cheap do not shun it and call it hard names.It is not so bad as you are.It looks poorest when you are richest.The fault-finder will find faults in paradise.wow gold kaufen love your life,poor as it is.maple meso You may perhaps have some pleasant,thrilling,maplestory power leveling glorious hourss,even in a poor-house.The setting sun is reflected from the windows of the alms-house as brightly as from the rich man's abode;the snow melts before its door as early in the spring.sell wow gold I do not see but a quiet mind may live as contentedly there,cheap mesos and have as cheering thoughts,as in a palace.The town's poor seem to me often to live the most independent lives of any.May be they are simply great enough to billig wow gold receive without misgiving.Most think that they are above being supported by the town;powerlevel but it often happens that buy maplestory mesos they are not above supporting themselves by dishonest means.which should be more disreputable.Cultivate poverty like a garden herb,like sage.Do not trouble wow powerleveln yourself much to get new things,maple mesos whether clothes or friends,Turn the old,archlord power leveling return to them.Things do not change;we change.Sell your clothes and keep your thoughts.
Next week is my boyfriend birthday, I do not know choose what present for his birthday, my good friend tell me that you can buy the flyff penya do the present, because he was very like to play the Flyff, yes, this is a good idea, but I do not know how to buy flyff penya and where wo buy the flyff gold, so this is a different problem for me, so I hope know how to buy the cheap flyff penya can told me, in here I was very thank for you.
Burberry polo shirt the steady, solid, so many young girls also love it. Speaking of people of a ralph lauren polo, think it a sign of nobility elegant waving in the horse club.spyder jacket in the cold in your winter activities can be easily.columbia jacket it is expensive, but here you do not need to consider the price of it. the north face jacket one of my favorite money, I do not know how many in this world of its fans.
ed hardy clothing
ed hardy clothes
ed hardy shirts
ed hardy t-shirts
ed hardy sunglasses
ed hardy mens
ed hardy womens
In preparation for the purchase of a tennis racquetbefore, we must consider your financial ability to bear; On this basis, a further comparison, as far as possible, choose your head tennis racquets. Now a lot of babolat pure drive and more mixed materials, the proportion of mixed-use to control the stiffness of the babolat aeropro drive and the shock-absorbing capacity, the more rigid babolat tennis racket, the swing more powerful force; but the relative resilience of the shock-absorbing capacity and wilson k factor performance of talks on the easier it is for the wrist and elbow injury.
Wholesale Handbags
Cheap Handbags
Womens Handbags
Cheap Purses
Designer Handbags
http://2009tennis.blogspot.com/
http://www.free-blog-site.com/tennis
http://o3.indiatimes.com/racquet/
http://cid-8c8a918b06ff68fd.spaces.live.com/?lc=2052
http://2009tennis.cocolog-nifty.com/
http://2009tennis.blog.drecom.jp/
http://2009tennis.blog.shinobi.jp/
http://www.actiblog.com/slary/
http://pshirts.blog126.fc2.com/
http://www.free-blog-site.com/shirts
http://nikepuma.blog.shinobi.jp/
http://hardy55.blog126.fc2.com/
http://cid-f80137f6d1a8020b.spaces.live.com/?lc=2052
http://www2.atword.jp/sdgdyhd/
http://kurumaro.com/hardy/
http://hardyclothes.jugem.jp/
http://www.actiblog.com/sfawagfra/
http://thediary.org/cheaphandbags/
http://ameblo.jp/kaowy/
http://sale.edublogs.org/
http://www2.atword.jp/jak/
http://09handbags.blog126.fc2.com/
http://sun15.cocolog-nifty.com/
http://ameblo.jp/ailsa15/
http://junior2tennis.blog.shinobi.jp/
Post a Comment