The Navbar, and the Next Blog link, are great blog accessories, and make your blog part of the Blogosphere. Not all blogs need the navbar though, and not all blog readers appreciate a blog with the navbar on it. Blogger recently admitted that we are permitted to hide it on our blogs, if necessary.
(Update 2009/11/12): With the new "Next Blog" link, and the transparent navbar design, do you really feel obligated to do this?
Note that all that you can do, here, is prevent the navbar from being visible. The code still exists, in the blog template; the navbar simply isn't visible when the blog is displayed.
Fortunately, hiding it isn't difficult. With the new Designer templates, just Edit the Navbar gadget, in the dashboard Layout wizard. You'll have a selection, "Off", at the bottom of the color selections. Save, and you're done.
A useful alternative to hiding the navbar - especially if you find the various links useful - is to make the navbar transparent. The Navbar gadget color palette includes two useful colors - "Transparent Light", and "Transparent Dark". You may find one of those settings more useful than "Off".
You'll have a little work, if your blog does not have the right template. Just add some extra CSS code in the template. I find that adding the required code right at the bottom of the Header section works best. You're welcome to put yours anywhere you wish, and not all bloggers agree where to do so, when they find it necessary to hide the navbar.
Find the 3 lines of code shown below, that are in the template now, and add the first line of code to immediately precede them. This will be at the end of the blog header, just before the blog body. In a normal template, and without "Expand Widget Templates" selected, this will be maybe 4/5 towards the bottom of the template. Backup the template, before, and after, you make this modification!
Some templates may work better using
With a Designer template, this is simple enough. From the Template Designer wizard, the Advanced - "Add CSS" option lets you add code.
With a Classic template, the code may be different.
Some classic templates (possibly some Layouts templates, too) may look better with one additional tweak. The Blogger supplied CSS library may include code that gives the Header container a top margin of 50px, to allow room for the navbar. If your blog uses a patterned or coloured background in the body, you'll have a noticeable blank area at the top. If this is a problem for you, add one additional CSS rule.
If the top container in your blog template isn't "header", you'll have to do some checking. Some templates have an additional container "header-wrapper" for instance. And not all templates reserve vertical space for the navbar. But for those that do, you now know where to start looking. Firefox with Firebug is a great tool, in this case.
And here's a neat variation on the above. If your objection to the navbar is its looks, how about a navbar that's only visible when the mouse is moved over top of it?
This does not work in all browsers, but Firefox has no problem with it. You can see this in action in my Miscellaneous Musings blog, and in my home blog Nitecruzr Dot Net.
Note, please, that if you copy the above lines of code and paste them into your template, the comments above, such as "<== Add this line," and "<== and this line,", must be removed. Do not copy the comments.
And note, above, my anal insistence that you install the customising code immediately preceding the existing </style> tag. This is so it's easy to locate the added code. If you decide, one day, that you need the navbar back, it is then easy to find the code that you need to remove.
>> Top
(Update 2009/11/12): With the new "Next Blog" link, and the transparent navbar design, do you really feel obligated to do this?
Note that all that you can do, here, is prevent the navbar from being visible. The code still exists, in the blog template; the navbar simply isn't visible when the blog is displayed.
Fortunately, hiding it isn't difficult. With the new Designer templates, just Edit the Navbar gadget, in the dashboard Layout wizard. You'll have a selection, "Off", at the bottom of the color selections. Save, and you're done.
A useful alternative to hiding the navbar - especially if you find the various links useful - is to make the navbar transparent. The Navbar gadget color palette includes two useful colors - "Transparent Light", and "Transparent Dark". You may find one of those settings more useful than "Off".
You'll have a little work, if your blog does not have the right template. Just add some extra CSS code in the template. I find that adding the required code right at the bottom of the Header section works best. You're welcome to put yours anywhere you wish, and not all bloggers agree where to do so, when they find it necessary to hide the navbar.
Find the 3 lines of code shown below, that are in the template now, and add the first line of code to immediately precede them. This will be at the end of the blog header, just before the blog body. In a normal template, and without "Expand Widget Templates" selected, this will be maybe 4/5 towards the bottom of the template. Backup the template, before, and after, you make this modification!
#navbar-iframe {height:0px;visibility:hidden;display:none} <== Add this line,
]]></b:skin> <== immediately above
</head> <== these 3 lines,
<body> <== that are already there.
Some templates may work better using
#navbar {height:0px;visibility:hidden;display:none} <== Add this line,
]]></b:skin> <== immediately above
</head> <== these 3 lines,
<body> <== that are already there.
With a Designer template, this is simple enough. From the Template Designer wizard, the Advanced - "Add CSS" option lets you add code.
#navbar-iframe {height:0px;visibility:hidden;display:none}or
#navbar {height:0px;visibility:hidden;display:none}That's all that you need. See my Musings blog, as a demonstration.
With a Classic template, the code may be different.
#navbar-iframe {height:0px;visibility:hidden;display:none} <== Add this line,
</style> <== immediately above
</head> <== these 3 lines,
<body> <== that are already there.
Some classic templates (possibly some Layouts templates, too) may look better with one additional tweak. The Blogger supplied CSS library may include code that gives the Header container a top margin of 50px, to allow room for the navbar. If your blog uses a patterned or coloured background in the body, you'll have a noticeable blank area at the top. If this is a problem for you, add one additional CSS rule.
#navbar-iframe {height:0px;visibility:hidden;display:none} <== Add this line,
body #header {margin-top:0px !important;} <== and this line,
</style> <== immediately above
</head> <== these 3 lines,
<body> <== that are already there.
If the top container in your blog template isn't "header", you'll have to do some checking. Some templates have an additional container "header-wrapper" for instance. And not all templates reserve vertical space for the navbar. But for those that do, you now know where to start looking. Firefox with Firebug is a great tool, in this case.
And here's a neat variation on the above. If your objection to the navbar is its looks, how about a navbar that's only visible when the mouse is moved over top of it?
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0);} <== Add this line,
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100,FinishedOpacity=100);} <== and this line,
</style> <== immediately above
</head> <== these 3 lines,
<body> <== that are already there.
This does not work in all browsers, but Firefox has no problem with it. You can see this in action in my Miscellaneous Musings blog, and in my home blog Nitecruzr Dot Net.
Note, please, that if you copy the above lines of code and paste them into your template, the comments above, such as "<== Add this line," and "<== and this line,", must be removed. Do not copy the comments.
And note, above, my anal insistence that you install the customising code immediately preceding the existing </style> tag. This is so it's easy to locate the added code. If you decide, one day, that you need the navbar back, it is then easy to find the code that you need to remove.
>> Top
Comments
Actually, I was playing with the "now you see it, now you don't" effect a few days ago. It doesn't work with IE, but it's right sharp in FF.
As far as I know, you'll still get "Next Blog" inlinks. I'm not aware that Blogger has blocked "Next Blog" based on navbar being blocked. I suspect that it would not be a trivial script to scan blogs for that, and right now, it wouldn't significantly detect splogs, as a standalone criteria.
Alanna
This is why removing the navbar, though permitted, is not recommended.
Now, you will need a bookmark pointing to www.blogger.com.
Thanks
Thank you so much.
xxxxxxx