At the top of Blogger blogs, you'll see a bar in blue or transparent colors which enables you to sign in to Blogger, search for blogs, go to next blog, customize, etc. It is known as Navbar. This can also be found under the Layout tab (on top-right corner) under Blogger’s Dashboard.
I have removed it due to some reasons. In my case, I didn’t find it to be much useful for me. Not only this, it was also not going with my template design. If you think that these reasons are enough for you too to remove Blogger Navbar then follow anyone of the tutorials as told below.
First, go to Template > Edit HTML. Find ]]></b:skin> and above this add:
#navbar-iframe,
#navbar {
height: 0;
visibility: hidden;
display: none;
}
Preview your template, you will find out that the Navbar is not visible (hidden). Now Save your template, that's it.
Other options
There are other things too that can be done, let us see that. Remember, these are all optional and use any one of the methods below whichever suits you.
Auto Hide
Just add the below codes before ]]></b:skin>.
#navbar-iframe,
#navbar {
opacity: 0;
filter: alpha(Opacity=0);
}
#navbar-iframe:hover,
#navbar:hover {
opacity: 1;
filter: alpha(Opacity=100);
}
This option will hide the Navbar temporarily. Whenever you move the pointer to the top of your browser screen, it will be visible again.
Remove Blogger Navbar Completely
Just before the </head> in your template, add the following code:
<!-- <body> <div></div> -->
This will not only completely remove the Blogger Navbar but you may also find that the quick edit pencil and wrench icons are also removed. This can be a big help for people who are trying to validate Blogger templates.
P.S. This post has been updated on 9 April, 2012.
it is just recently that i knew that it’s possible to remove this navbar, my blogs were just bad and so, for long time. In my opinion it’s always a better option to remove the blogger navbar because when it’s not done, the blog just looks like a novice blog. Thanks so much for the trick! Wow! This tip will grow my traffic by 200%, many people really ignore this tip. I thank you so much guy!
ReplyDeleteThanks a lot! this really helped!
ReplyDeleteThat was super helpful, thanks so much!
ReplyDeleteI just did mine, great help. Now my blog looks great without a Navbar.
ReplyDeleteThank you Raju. Hope you will reply on my other question on my floating sidebar.
i cant find ]]> in my blog. i am using blogger provided templates...
ReplyDeleteYou mean ]]></b:skin> , right?
ReplyDeleteTry searching once again with the above code (marked in bold) by hitting Ctrl+F keys together to open a search bar on your browser, it will be easier and it's always there...