Saturday, August 8, 2009

Toggle [ Hide/Show ] NavBar In Blogger/BlogSpot Blogs

In most of the new blogs based on Blogger platform (either with .BlogSpot or a custom domain) you would have observed that the top-navbar is missing, but Blogger doesn't suggest you to remove the navbar.
Neither Blogger nor Google will penalize you for removing/hiding the navbar, but for providing such a great platform for blogging, according to me every blogger must show their gratitude to Blogger, either by showing a small Blogger Button, or by showing the navbar.

If the navbar doesn't fit well with your present template, then here's a simple script to auto-hide the navbar, but it will be shown to the visitors as soon as they hover their mouse-cursor over it.

To enable the navbar-toggle feature in your blog, follow these instructions:
Log in to Blogger -> Layout -> Edit HTML

Download and save your present template.

Then find(CTRL+F) a code similar to this in the template:

#navbar-iframe {
Any code in your template, with class='navbar' and visibility='hidden' hides the navbar completely, so you have to remove this code.

And replace the above code with this one:

/* Blogger Navigation Bar */
#navbar-iframe {
height: 10px;
#navbar-iframe:hover {
height: 30px;
filter:alpha(Opacity=100, FinishedOpacity=100)
border: 2px;

That's it !
Stumble Delicious Technorati Twitter Facebook
If you enjoyed this post, make sure you subscribe as an Reader!


Post a Comment

← Newer Post Older Post → Home

Recent Posts

Recent Comments

Follow Me - Advertise your site at! Submit your site and get tons of traffic! - Advertise your site at! Submit your site and get tons of traffic!