One of the thing I first notice after I subscribed to Blogger is the Navigation Bar on top. Kinda obstructing, it seems. So, I figured there should be ways to remove that, and I have seen it done before on other blogs, but I really like to do this my way. Hopefully I didn't infringed any of Blogger's term and condition by doing that.
I fired up Firebug, a helpful extension that runs from within firefox to ease web developers of their jobs. After inspecting the page, I saw that the Navigation Bar has an id attach to it. It's call "navbar-iframe", and hence I coined the name Navigation Bar. I choose the highest level tag of the navbar, which is the iframe in this case, to avoid any leftover from appearing later. I did some test by executing some code in within Firebug (yes, you can do that if you haven't know) to hide the the navbar. Once the method is proven, I started with the coding.
WARNING: Don't do this just yet, best things always comes last. Unless you want to play around and learn some coding, then go ahead.
I head over to customize my Blogger under Layout->Edit HTML. Added a few things.
1. Right before </head><body>, I added a script section
<script type="text/javascript">
function remove_nbar()
{
document.getElementById('navbar-iframe').style.display = "none";
}
</script>
2. Then I added onLoad='remove_nbar() to the tag which should look like below:
<body onLoad='remove_nbar();'>
That's it, voila, it's that simple. Save the template, then preview, you'll see that the navbar will disappear, ... but ... after the whole page finish loading. It didn't really border me at first, as long as it works, who cares. Well, kinda like Malaysian mentality(sorry fellow Malaysians).
Much later, someone asked for the same solution in astahost, a free web hosting forum. I'm an active "hosted" member there, trying to post and earn some points to keep my free hosting alive. So it looks like another chance to show off and earn some points there. It didn't turn out to be a professional solution after all. Later, one of the fellow member(miCRoSCoPiC^eaRthLinG) suggested on using CSS to solve the problem. After a little bit of tinkering, finally got to a more "pro" solution.
I removed whatever that's added earlier. Then Look for
<div id='outer-wrapper'><div id='wrap2'>
<style type='text/css'>
#navbar-iframe { display: none; }
</style>
You might suggest, why not put it at the header section, much like the script before. Well, the style declaration of the navbar is after the header, so whatever before it will be overridden. Therefore it's best to put it right after the navbar, such that it will override the original declaration and hide the navbar even before the page finished loading.
That solution stays for quite a few weeks, until I started to post my first blog today. Well, I found another problem. I can't click on the "Customize" link when I went to my blog, it's hid away together with the navbar. It's a bit troublesome resorting to the dashboard, then edit profile.....
So I figured, why not, make it one more step further and ever. I kept the style declaration, then added the following script at the header section, like before (again).
<script type='text/javascript'>
function show_navbar()
{
document.getElementById('navbar-iframe').style.display = "block";
document.getElementById('hide_navbar_link').style.display = "block";
document.getElementById('show_navbar_link').style.display = "none";
}
function hide_navbar()
{
document.getElementById('navbar-iframe').style.display = "none";
document.getElementById('show_navbar_link').style.display = "block";
document.getElementById('hide_navbar_link').style.display = "none";
}
</script>
Then add these 2 links right after the <body> tag
<a href='javascript:show_navbar();' id='show_navbar_link' style='position: absolute; top: 0px; left: 10px;color: #000000; font-weight: bold;'>Show ^</a>
<a href='javascript:hide_navbar();' id='hide_navbar_link' style='position: absolute; top: 30px; left: 10px;color: #000000; font-weight: bold; display:none;'>Hide ^</a>
Should be be getting what it is showing in my page right now. Do remember that you still need the above style declaration to automatically hide the navbar. I configured the position of the link to 'absolute' to make it float and stay on top of other things. The floating link allows you to show or hide the navbar as you command. Cool?
Cool, tried it and it works for me. Only problem I have is that my light brown border is not connected along the top. And my header is too high.
ReplyDeletehttp://lifephotos-sven.blogspot.com/
I was looking over your page, through trial and error, I found that you need to change the padding for your #outer-wrapper under "Layout"
ReplyDeleteBefore -> padding: 8px;
After -> padding: 0px 8px 8px 8px;
That should fix your problem, at least it does on the saved page I tested.
I'm sorry for the complete offtopic, but how can I contact you privately? I have a question how to install vs2008 sp1 on Eee PC 901 (googled on stackoverflow that you've done it successfully).
ReplyDeleteMy email is vlad2135 at gmail dot com. Please respond!
i just changed it how you said, saved it, but nothing happened.
ReplyDelete@Stev, I saw that the light brown header is already connected to the top. But when I click "show", the navbar seems out of place. I'll try to figure out how to solve it.
ReplyDeleteBtw, Can you test and see if your original setup without my code also having this problem?
Thanks so much faulty!!! I just changed my blog layout and your nav bar is working perfectly on my blog!!!
ReplyDeletehttp://lifephotos-sven.blogspot.com/
@Stev, you're welcome.
ReplyDeleteI tried to find an email on your blog to email you directly, but I could not find it. I have been searching the web and I cam across a post by you under the name faulty. It was quite simply the smartest post I have ever read regarding the subject. You seem to really understand what a 3d engine is. Can you please tell me what the difference between Direct3D and XNA is? My hypothesis is that Direct3D is an API for graphics related content and XNA is a derrivative of Direct3D. That would mean XNA doesn't have anything Direct 3D doesn't. Is that correct? Please email me or answer here. Any help would be appreciated.
ReplyDeleteThanks,
Nick
Hey thanks for you response on my blog! If you ever need a cool onload function that adds functions without touching the old one try this (I know you didn't end up using onload, but this is a cool trick by Simon Wilson):
ReplyDeletefunction addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
/* more code to run on page load */
});
You're welcome, and thanks for the code too.
ReplyDeleteApologies for an anonymous post but my id names a business and our blog is still a WIP. Your description of how to hide the navbar is very helpful.
ReplyDeleteThe next thing I want to do is add my own external stylesheet. The blogger blog is hosted on our own site. Does anyone do that?
thanks.