Tintation on Facebook Tintation on Twitter Tintation on StumbleUpon Tintation on Google Tintation on LinkedIn Tintation on YouTube Tintation on Delicious Tintation Articles RSS Feed Send E-mail to Tintation

Tintation – The Web Resources Blog » Computer Tutorials, Program Codes » How To Remove Blogger – Blogspot Navigation Bar NavBar

How To Remove Blogger – Blogspot Navigation Bar NavBar

How To Remove Blogger - Blogspot Navigation Bar NavBarRecently I have noticed that many Blogger Blogs and Websites had an annoying and ugly Navigation Bar. Also, I noticed that most or all of the modified templates didn’t have that Top Blogger Bar. So, I thought to myself, okay… so… that means that I am also should be able to remove that Navigational, Blogger, Blue, Top Bar. If you don’t know what I’m talking about, then you probably don’t need to worry about this issue, and if you still wondering what that Navigation Blogger Bar is, then try to find a few of Blogger Websites and you’ll see what I’m talking about. The Blogger websites have the last part of their URL addresses like this .blogspot.com To the right is an example image of a Blogspot Blog with that Navigational blue Bar.


Blogger Example With-Out Visible NavBarWhile I had the default blogger template I never even noticed that some people took it off on their own. But later on I uploaded a modified and better looking template to one of my Blogger Pages and then I started to notice that the Navigation Bar from Blogger was gone. Well, it is very easy to take it off of your Blogger Website, just follow with my little Tutorial Below. To the right is an example image of a Blogger Website without the Navigation Blogger Bar.

How To Remove the Blogger – Blogspot Navigation Bar (NavBar) Tutorial.

1. – Open your Blogger Dashboard and Log In if you haven’t already.

2. – Find somewhere in the middle blue links that say NEW POST – Edit Posts – Settings – Layout – Monetize.

3. – Click on the Layout Link. It should take you to the Page Elements Layout Page.

4. – Find somewhere in the Top Left Corner these Links that say Page Elements, Fonts and Colors, Edit HTML, Pick New Template.

5. – Click on the Edit HTML Link. It should take you to the HTML Editor of your current template for your Blogger website.

Location of CSS Code to remove NavBar6. – Look at the picture on the right of this sentence. That is where you should put your new Navigation Bar Removal CSS code that I will give you in a little bit.

7. – After your Edit HTML page opened up, put your mouse pointer and click right Before this code “/* Variable definitions” and push Enter or Return Two times.

8. – Then Click on your Keyboard the Up arrow Two times, so it is now in the empty line with one empty line on top of it and on the bottom of it, that is where you will Paste your New Code.

9. – Copy This CSS Code below and Paste it into that middle empty line of your HTML Template (make sure to copy it exactly the same way with all the weird marks),

/* Code To Hide NavBar Begins */
#navbar-iframe {
display: none !important;
/* Code To Hide NavBar Ends */

10. – Click on the Button below your HTML Editor that says: SAVE TEMPLATE

11. – Now you can go and Refresh your Blogger website and the NavBar should disappear.

12. – If for some odd reason your website got messed up or you just want that Navigation Bar back, then go back to that HTML Template Editor and delete everything that you have done to it and save it again, and that should make it to be as it was before your started doing this tutorial.

Also, your template may look different and have different code for it, so you’ll just need to ask a professional or an experienced programmer for the advice on where to put that NavBar removing code. Or you can just ask me here in the comments section. Make sure to send me your Question for help, Website’s URL that has the blue NavBar, and copy and paste into comments about 20 top lines of code from your Blogger Template. (if you trust me of course). Then I’ll get back to you when I’ll have time to help you. Thank you for reading and feel free to email me your code instead of commenting it to this article tutorial.

Written or Posted by

I am an Enthusiast of Computer Graphics, Web Graphics, SEO, and Codes. I love designing and developing my own websites and blogs. At the same time I love seeing and sharing about other professional, unique, and high quality designs that people make for their websites, graphics, and software.

Filed under: Computer Tutorials, Program Codes · Tags: , , , , , , , , , , , , , , , , , , , ,

2 Responses to "How To Remove Blogger – Blogspot Navigation Bar NavBar"

  1. Offres d'emploi au Cameroun says:

    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!

  2. Trea says:

    Thanks so much for the post on removal blogspot navigation bar!
    Love from Switzerland.

Leave a Reply

You can use these tags, but remember Spammy Comments Will be Spammed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>