Click on the Show/hide Navigation text at the top of the right hand bar. How to do this?
This is the first Google search result for "how to hide blogger nav bar". And it works like a dream and has been used as a starting point here. Why bother looking for more?
The most obvious reason to look deeper is that the nav bar contains the highly functional buttons like New Post and Customize. Can you live without those?
So you want both to keep the nav bar and get rid of it? Adding such show/hide functionality is not rocket science. All you need is a global JavaScript parameter, one function and a place to click on.
In Blogger terms, paste the following code between your <head>...</head> tags:
<head>
<script type="text/javascript">
var showHeader=false;
function ShowHideNav()
{
showHeader=!showHeader;
var nav=document.getElementById("navbar-iframe");
if (showHeader)
{
nav.style.visibility="visible";
nav.style.display="block";
}
else
{
nav.style.visibility="hidden";
nav.style.display="none";
}
}
</script>
<style type="text/css">
#navbar-iframe {
visibility: hidden;
display: none;
}
</style>
var showHeader=false;
function ShowHideNav()
{
showHeader=!showHeader;
var nav=document.getElementById("navbar-iframe");
if (showHeader)
{
nav.style.visibility="visible";
nav.style.display="block";
}
else
{
nav.style.visibility="hidden";
nav.style.display="none";
}
}
</script>
<style type="text/css">
#navbar-iframe {
visibility: hidden;
display: none;
}
</style>
</head>
Then add the following HTML somewhere. I added mine in a new HTML/JavaScript page element. You can try it at the top of the right hand gray bar: just click on text Show/hide Navigation.
<span style="cursor:pointer;" onclick="ShowHideNav();">
Show/Hide Navigation
<a style="visibility:hidden;" href="http://derya-webresource.blogspot.com"></a>
</span>
We're done! Let me know if you find this useful and link to this post. Thanks.
50 comments:
Thanks soo much fore your code to get rid of the nav-bar! Works great! 1000 smiles!
many thanks!
Thanks so much. I love it. I managed to pur the bar at the footer, but this solution is much better.
Thanks! This worked for me.
Thank you so much, Derya for a great hack code. It worked the first time!
Thank you Derya! I am a teacher. I don't have a problem with the navbar... but my students have wandered into some rather inappropriate sites with the "Next Button." Why don't they offer that as an option?
Thank you so much!!
That's genius :) thanks very much! I hope there'll be more nifty features like this to come, I certainly stand no chance of working it out myself. Tragic, that.
Excellent solution - much better than getting rid of the nav bar completely. Thankyou. Clear instructions also... :)
Genius. A great resource!
Thank you, Thank you, Thank you. It is kind (brilliant) people like yourself that help needy, not so smart people like myself.
I truly appreciate it. Now my blog looks more like a website than a blog.
thanks for the script. it works for my blogs.
thank you so much. works great.
Hurra! You're a genius!
Thank you so much!it works great! I believe this solution is the best.
Woaw !! That's great and so easy!
Thank you Derya, it's brilliant.
Just to let others know, I also changed the text to an image aligned to the left, so those who navigate through the navbar woudn't have to look for it. (See it on my blog).
Thanks again.
Derya,
Great hack for Blogger blogs! Recommended it (and linked to your blog) in my Get Approved for Google Adsense lens on Squidoo.com
Hey Derya,
Thanks a million for the code... my blog looks... perfect now..
Thanks heaps for that! I'm a complete newbie (my blog was just set up a day ago, but your instructions were just so clear that the code worked on the very first try! :)
Sweet worked great on my site too.
Tonys Daily Blog
Thanks!
Tony
Thank You! This was very helpful for adding some art at the end of each post automatically! You can see it on my site. www.TheArtistGrimoire.com
Thanks Again,
Brenda
Works like a charm! Thanks. Very helpful.
www.banyanofideas.blogspot.com
Yes, thank you for that ! Works !:-)
Thank you! Worked like a charm on www.lankan-cricket.blogspot.com Thanks!
thank you very much.
Thank you very much! Since I'm also a teacher (although of adults), I had a great concern about the "adult" content that was showing up from "Next Blog".
The one thing I'm not sure of is using the "Show/Hide Navigation." This functionality is nice, but doesn't seem all that necessary. Is there some important reason I'm missing for including this code. It looks kind of out of place to have the resulting text on my blog.
I wish there was a way to just get rid of the "Next Blog" part. Maybe there is and I'm just missing it!
Thank goodness for helpful people like you!
great its a working code..
That's really cool, I really appretiate that.Indian Premier League is really the hot topic in today's cricket. For more information regarding Indian Premier League news, contraversies, teams, contracts, players.....
visit: Indian Premier League
Thank you very much !
"MS"
Thanks for the great tip. It works like a charm, and the show/hide option is tasty icing on the cake.
hey thanks, this works! i used it for the classic though setting up a friend's one. this is reall good, thanks a lot!
OMG IT ACTUALLY WORKS!!
Thank you so much!!
Worked perfectly. Thank you :)!
Very nice! @Sylvanus, the image doesn't work as hoped for in IE7 ...
Take a look at the comments/subscribe/send bar at the beginning and end of each post here:
http://sarah-jones-larson.blogspot.com/
Wow.. Fantastic. It worked 100 %. check my site Chennai Baba. Gr8. Thnx.
A great solution to the nav bar dilemma - thanks.
Thanks! "Cleaned up" my blog alot!
Nice post. Thanks for the help.
Thanks alot! =]
Thanks so much - worked like a charm and really easy to follow!
hey thanks so much
great!!!!
Thank you!
Works great.
You Rule BlogLand.
great work for the hide navigation bar code. I applied at my sites Pendapatan Sampingan already.
thanks for sharing :D
Thank you soooooooooo much Derya! It really worked and other websites just told me how to get rid of the bar but it was cool of you to give your viewers a "show bar" button.
And I recommend a website for cool blog backgrounds: www.thecutestblogontheblog.com
Thanks!
Thanks. Works like a charm. Now running on http://amusedspectator.blogspot.com
THANK YOU! I have looked and there are plenty of people giving code but none worked. Thanks for sharing.
Very cool tip. I have applied your tips successfully in my blog.
Post a Comment