One of my reader has emailed and asked me how to hide the Blogger Navbar on my Finishing Touch : Free XML Converted Blogger Template. So, I think it's better if I write this tips to figure it out.
Introduction
The Blogger Navbar is a navigation and search bar on top of all blogspot blogs. It is available in several colors, and is configured in the Template tab in Blogger’s interface. You can get more information about Navbar from Blogger Help.
How to Letting Blogger Navbar Showed (Not really Hide/Auto Hide)
The principle of this trick is the navbar is not really hide. It will showed when the visitor's mouse is hover on it. Inversely, the navbar is automatically hiding when mouse is not in navbar area.
Guide:
To make this tip works, in edit HTML, find out code
body { then put the following code on top of such body { code.#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}How to Hide Blogger Navbar (Permanently)
There is till a controversy of removing blogger navbar. Some user had reasoning that this hack is an illegitimacy by Blogger TOS. There some others have opinion and reported that a condition why they don't remove the navbar or keeping hold the navbar relate to gained-bad traffic for blogs that removed their navbar.
I don't suggest you to remove your navbar. The final decision to keep or remove your navbar is on your hand. What I will explain afterwards is for who want to remove their navbar is just as a technical info how to do it for their blogger xml code.
Steps to Hide Blogger Navbar
Step 1. Log in to blogger account
Step 2. On your Dashboard, select Layout. This will take you to the Template tab. Click Edit HTML. Under the Edit Template section you will see you blog’s HTML and CSS Code.
Step 3. Put the following CSS code between <HEAD> and </HEAD> tag whenever you want to hide blogger navbar;
#navbar, #navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}Step 4. Inverse of Step 3 above. Just Delete the previous code to show the Navbar in your Blog (Most of Recent Blogger Template which are converted template from other different platform has remove blogger navbar style to adjust the origin theme style). So you need this step when you wish make the navbar re-appear)
Video
If you want to learning by visual how to hide/show blogger navbar, this video tutorial is most valuable to explain it;, shockwave-flash@http://www.metacafe.com/fplayer/739548/remove_blogger_navbar.swf" href="http://www.metacafe.com/fplayer/739548/remove_blogger_navbar.swf" id="">
UPDATE (Sep, 8 2008)
I've made the non-navbar one of Finishing touch Blogger XML Template for Free Download. You can download it here
I've also got some that reported trouble with their widget ID backup while they changing their template. I'm preparing the post about this topic.
There're 2 Awesomes About How to Hide or Letting Blogger Navbar Showed » Here To Add Yours
Thanks a lot for the tutorial but got the same problem:
We were unable to save your template
Please correct the error below, and submit your template again.
More than one widget was found with id: Feed1. Widget IDs should be unique.
And the template can't be saved and the navbar is still there.
Is it possible that i didn't understood what should i do? I pasted the code right before body {
Is there something wrong?
Thank you so much for the tutorial! Now some of my blogspot blogs are in for some new changes.
Post a Comment
Let others appreciate you trough what you said