How to remove the Blogger bar from your blog

Blogger 01

All blogs that are edited through Blogger (the free blogging system that Google makes available to its users) contain a peculiar bar, also called Nav Bar , which is located at the top of the page and sometimes even it can be annoying. Some users want to remove it from the map , so today we are going to give you precise instructions so that the bar in question disappears once and for all from your blog. Too easy. You will see:

blogger bar

1) First, you have to access the configuration section of the blog in question. To do this, just enter your username and password. It is the same that you use to access your email and the rest of Google services .

2) In the Template section (located in the bar on the left side of the page) you will find a button called Edit HTML . Click on this box (marked in gray). When you're inside the lines of code, look for the sequence: body {. You will see that it is usually at the beginning, more or less from line number 200 . It shouldn't be any further. If you can't find it, go to your browser's search option and type the word “body”. In a few seconds you should have located it.

blogger bar 01

3) It is at this point (above the word body) that you will have to add the code , as you will see in the image that we give you as an example. Copy and paste the sequence that we offer below and you will save the typing:

# navbar-iframe {

height: 0px;

visibility: hidden;

display: none


If you want to understand what the procedure consists of, don't worry. The entered Css code is relatively easy to explain . First, the element that we want to modify is identified. In this case, it is the “navbar-iframe” or the Blogger bar . Two brackets are placed to locate the properties of that element.

The first indication is related to the height of the element (height) . It will be zero (0) because it will not have any height: it simply will not exist. The second property regulates the visibility (hidden) . What is indicated here is that the object will be invisible. The third and last is the one that corresponds to the word display and determines whether or not the element in question should be shown on the screen. In this case, the entered value is none or none .

blogger bar 02

4) When you have finished this simple step, click on the orange button that says  Save template . The changes will have already been saved and you will be able to access the cover of your blog to verify that the solution we provide you has taken effect.

5) Click on the Preview template button to go directly to the blog. You will see immediately that the bar that bothered you so much no longer appears on the screen. If you are still watching it, you may have made a mistake in some step. Review again the guidelines that we provide you and execute them at face value.

As you can see, the action only consists of giving the order that the bar in question is not displayed. If you ever want to retrieve it , all you have to do is access the same line of code again and delete the text fragment you just entered.