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

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 , 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 {
height:0px;
visibility:hidden;
display:none
}

Any code in your template, with id=’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 {
opacity:0.0;
height: 10px;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:1.0;
height: 30px;
filter:alpha(Opacity=100, FinishedOpacity=100)
border: 2px;
}
/*Blogger-Help-http://bloggerstop.net*/

That’s it !

Leave a Reply

45 Comments on "Toggle [ Hide/Show ] NavBar In Blogger/BlogSpot Blogs"

Notify of
avatar
Sort by:   newest | oldest | most voted
Blog Angel (A.K.A. Joella)
Guest

Excellent alternative to completely removing the Blogger bar. Another helpful article…

View Comment
$@! kr!$#n@ DeEp
Guest

HEy DS ! love your love,nut can you tell me how to make an animated image that you did in this post !

thnx

View Comment
snam
Guest

How did you do that? Show the flashing image like that?

View Comment
Divya Sai
Guest

Thanks for the feedback !
Search for "make animated image" in this blog, to create such images…

Regards
Sai

View Comment
imran
Guest

how did u do tht??anyway its a good hack.i'm gonna post this to my blog now!!thx for this hack,divya

View Comment
Blogger Make Money
Guest

Thank you, I already use it but it makes my blog looks mess up.

View Comment
Dan*
Guest

nice tricks 🙂

would be happy to know how you wrote Share your views font style in ur comment box 😛

View Comment
IMWATIM
Guest

would you like to be member of my forum?i will make you the moderator immediately…
if interested email me at imwatim@ur4m.com
My forum:-www.ur4m.com

View Comment
Proneat
Guest
Sherry
Guest

wow this is something new 🙂

View Comment
teratips
Guest

Thanks for the post!
get Money Blogging Tips and be a successful blogger
http://www.teratips.com

View Comment
teratips
Guest

thanx for sharing.
my blog about blogging and money
http://www.teratips.com

View Comment
-Saul
Guest

I am just starting a blog now and said… "I don't like the bar at the top". It was perfect timing for me to read this!

Thanks for this tip!

Website Design Katy, Houston, TX

View Comment
Divya Sai
Guest

Welcome Saul, good luck for your new blog 🙂

View Comment
Divya Sai
Guest

As you have your own website Saul, so if you want you may create a sub-domain and use it as your blog's address, like this:

http://blog.digitalsqft.net/

View Comment
Sathish
Guest

could you please tell me how you altered the linkwithin code to show four related posts instead of the default three posts. Thanks in advance

View Comment
Divya Sai
Guest

Simply shoot a mail to linkwithin team with your blog address & linkwithin widget ID:

http://www.linkwithin.com/contact

that's it, they'll do it for you 😉

View Comment
Sathish
Guest

Thanks a lot Divya.

View Comment
teratips
Guest

Great insights, thanks

View Comment
Astonmaya
Guest

Thank you for sharing! Your tips are amazing! Keep it up!

View Comment
wpDiscuz