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:
And replace the above code with this one:
That's it !
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 id='navbar' and visibility='hidden' hides the navbar completely, so you have to remove this code.
height:0px;
visibility:hidden;
display:none
}
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 !
43 comments
Write commentsExcellent alternative to completely removing the Blogger bar. Another helpful article...
ReplyHEy DS ! love your love,nut can you tell me how to make an animated image that you did in this post !
Replythnx
How did you do that? Show the flashing image like that?
ReplyThanks for the feedback !
ReplySearch for "make animated image" in this blog, to create such images...
Regards
Sai
how did u do tht??anyway its a good hack.i'm gonna post this to my blog now!!thx for this hack,divya
ReplyThank you, I already use it but it makes my blog looks mess up.
Replynice tricks :)
Replywould be happy to know how you wrote Share your views font style in ur comment box :P
would you like to be member of my forum?i will make you the moderator immediately...
Replyif interested email me at imwatim@ur4m.com
My forum:-www.ur4m.com
kool..
Replyhttp://www.2100science.com
wow this is something new :)
ReplyThanks for the post!
Replyget Money Blogging Tips and be a successful blogger
http://www.teratips.com
thanx for sharing.
Replymy blog about blogging and money
http://www.teratips.com
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!
ReplyThanks for this tip!
Website Design Katy, Houston, TX
Welcome Saul, good luck for your new blog :)
ReplyAs 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:
Replyhttp://blog.digitalsqft.net/
Simply shoot a mail to linkwithin team with your blog address & linkwithin widget ID:
Replyhttp://www.linkwithin.com/contact
that's it, they'll do it for you ;)
Great insights, thanks
ReplyThank you for sharing! Your tips are amazing! Keep it up!
ReplyI love this trick very nice
Replyhai..i'm newbie.. using blogger default template... can't find the code to replace yours...please assist..thanks
ReplyIf the code is not there, then find this code in the template:
Reply<style type="text/css">#navbar-iframe { display:block }
</style>
and modify it like this:
<style type="text/css">
/* 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*/
</style>
I too can not find either of the codes you've offered up...yet when I view source on the blog itself I see all sorts of code related to the navbar. Has Blogger gone to Javascript or hidden some more of the code from us?
ReplyHi Ashlea,
ReplyI have checked your blog, here's the code that you have to replace:
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
PS: In your blog that code is just below these 2 lines:
/* Header
-----------------------------------------------
*/
Ha...I just added that code a few minutes ago. I was trying to get your autohide to work so I thought I'd put some code I knew work into the template just to see if I was still able to remove the navbar completely. Even when I remove the code you noted and add the code you suggest, the autohide isn't working. Something in IE7?
ReplyI'm not seeint the #navabar id anywhere.
ReplyOf course you are not given access to id=navbar
Replyyou can control it only through the css part of the template (that means #navbar-iframe)
So when you added that previous code, navbar hid completely right?
So now, simply add this code and ask me to check it. Actually here the toggle means navbar will be shown when hover your cursor in the top 10 pixels region of your blog.
BTW the pics on your blog are really beautiful, great going !!!
Forget the tutorial above, and Exactly follow these two steps:
ReplySTEP #1"
FIND THIS CODE:
/* Header
-----------------------------------------------
*/
STEP #2
And immediately BELOW it paste this code:
/* 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*/
STEP #3
Save the template and check out your blog. and tell me if it worked or not :)
Thank you . It's working.
ReplyYou are most welcome Norel :)
Replyargh! not working on IE (again...IE...giving me so much trouble). fine with firefox.
Replyin IE, the navbar "seems" to be there but will not show at mouse-over, completely invisible. but the links that are supposedly available on navbar can be clicked although they're invisible. em...i don't know how to explain but can u help on this?
Hey there,
ReplyIn your blog, there are two codes for the navbar, which is confusing IE. One code wants to hide the navbar completely, whereas other one is adding toggle effect to it. So remove the code which is hiding the navbar completely.
@smiley,
Replyhere's the exact code you have to delete completely:
/*this code is to hide completely--- #navbar-iframe {
height: 0px;
visibility: hidden;
}---*/
Hi I went ahead and used your code to make my nav bar toggle which is great. Do you know how I can hide the white spot left up there when it is not visible?
ReplyThanks for your time,
Ken
Well, do not remove the height variables in the code. Make the height "5"/"10" in the hidden state (but not 0).
ReplyAnd also make the padding in this code "0px" from "15px":
#wrap4 {
background:url("http://www1.blogblog.com/harbor/center_cloud_left.jpg") no-repeat 50% 0px;
padding:15px;
width:100%;
width/* */:/**/auto;
width: /**/auto;
}
Regards
Sai
Sorry I am so new at this. Here is the code I used:
Reply#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0);}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100,FinishedOpacity=100);}
Do I add the other code you show above to what I already have?
I have resolved this issue on pure javascript with state of navbar saved in cookies. You can find the description following by this link - http://with-love-from-siberia.blogspot.com/p/blogger-navbar.html. Sorry, this is in Russian but you can translate it with Google.Translate.
Replythanks, sai. i think you're rite. i have the same prob with some other codes where i use the "/*hide--/" tag. it din hide the text meant for my own reference :P!
ReplyHi Team,
ReplyI appreciate most of the solutions proposed.
I have anyway a small prob: I am not finding at all the code (the various options above listed) in my blog to can install the hide / show navbar as shown above.
Please could you help ?
Regards
Okay, do not try to find any code in the template, simply paste the second code directly above this line:
Reply/* Page Structure
I was able to get the navbar to auto-hide, but now for some reason there is a slight gap between the my browser and the top edge of navbar??? Does anyone have any idea how to fix that, I'm also running Friend Connect Social Bar on the bottom, and i was thinking that that might be causing some problems or something... Really what happens is the page loads, then after everything is loaded the whole page drops about 1-2mm bring the navbar with it... So if the window didn't shift after loading, then the navbar would seat just fine... Any help would be appreciated...
Replynevermind, it just fixed itself...
ReplyYes!! It's working nice. :)
ReplyWho doesn't find the #navbar ID, I suggest them to put the style code of comments No.23 that Sai says after/below </header tag.
It's will work fine.
really wounderful. very useful 4 my blog.. thank u..
ReplyComments are moderated on this blog
Allowed HTML tags: <b>, <i> and <a>
Comment Like This! and Optimize your blog EmoticonEmoticon