Z Blogger Template Treats

Blogger How To Tips & Tricks

Removing the navbar in blogger is fairly easy, and can be done in multiple ways. The navbar was intended as a tool that will bring visitors to blogs hosted on blogspot, by clicking the next blog button. In theory it seems like a good feature, but in practice is just an ugly bar that nobody uses.
I will show you below 3 simple ways to remove the navbar.

Remember to backup your template before you do any changes (Template > Backup / Restore > Download full template)

1. The official method

Just go to "Layout" tab and look for a widget called "Navbar" than tap "Edit" and choose the option called "Off". Now the navbar won't show on your blog.

2. The CSS method

Navigate to Template > Edit HTML and search for:

]]></b:skin>

Now add this line above it:

#navbar-iframe,  #navbar { display: none !important;}

And save click on "Save Template"

3. The permanent remove method

Go to Template > Edit HTML and delete this code:

  <b:widget id='Navbar1' locked='false' title='Navbar' type='Navbar'>
    <b:includable id='main'>&lt;script type=&quot;text/javascript&quot;&gt;
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener(&#39;load&#39;,
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent(&#39;onload&#39;, function(){ object[attribute] = val; });
      }
    }
 ....................................................................................
          }
        });
      &lt;/script&gt;&lt;script type=&quot;text/javascript&quot;&gt;
(function() {
var script = document.createElement(&#39;script&#39;);
script.type = &#39;text/javascript&#39;;
script.src = &#39;//pagead2.googlesyndication.com/pagead/js/google_top_exp.js&#39;;
var head = document.getElementsByTagName(&#39;head&#39;)[0];
if (head) {
head.appendChild(script);
}})();
&lt;/script&gt;
</b:includable>
  </b:widget>

The red dots contain sensitive information about the blog owner, so i removed it from here. Basically you need to delete everything from  <b:widget id='Navbar1' locked='false' title='Navbar' type='Navbar'> to </b:widget>

Alternatively you can change:

  <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>

to

  <b:widget id='Navbar1' locked='false' title='Navbar' type='Navbar'>

And then delete it like a normal widget from "Layout" tab