April 19th, 2010 | 2 Comments
Recently 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.
While 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.
6. – 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 */
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 vlad3368
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: Bar, blog, Blogger, blogspot, blue, CSS, delete, how, how to, HTML, instructions, NavBar, Navigation, Navigation Bar, navigational, Remove, take off, to, Top, tutorial, website
- Affiliate Marketing
- Blogging and Writing
- Blogging Blogger
- Blogspot Templates
- Computer Tutorials
- E-Mail Marketing
- Financial Tips
- Free Fonts
- Free Icons
- Free Wallpaper & Backgrounds
- Graphics & Designs
- Hi Tech Products
- Internet Marketing
- Logo Inspirations
- Modern Technology
- Photoshop Brushes
- Photoshop Custom Shapes
- Photoshop Tutorials
- Program Codes
- SEO & SEM
- Tints & Colors
- Virus Malware Spyware Removal
- WordPress Plugins
- Wordpress Themes
- WordPress Tutorials