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?
