Designed by Veethemes.com

Remove or Hide Your Blogger Navbar From Your Blog

               If you used  blogger default classic templates then show Navbar on at the top of  the blog. It’s very usefull feature of Blogger [every Blogger-powered blog]. Mostly third-party of blogger template navbar usually hidden on blog and use custom navigation bar. It’s not usually looking professional so most of blogger remove this feature. Here I’m giving a tutorial on ‘How  to Remove or Hide Your Blogger Navbar From Your Blog’ in different way.


Remove or Hide Your Blogger Navbar From Your Blog
Recommended Reading : Top 10 Templateism Premium Blogger Template for Free 2013
Remove or Hide Your Blogger Navbar From Your Blog :

First Method : Simply hide this Navbar
  • Login to your Blogger account, click on your blog name and navigate to Layout;
  • Look for the Navbar text and click on the Edit link as shown in the picture below:

click on edit option
  • When the pop-up window appears, scroll down and select Off, then click on Save button:

Off Navbar Option
  • You work all done.

Second Method : Permanentally Remove from blogger template this Navbar


  • Login to your Blogger account, click on your blog name and navigate to Templates>>edit HTML [Exapand Widgets Templates];
  • Then search  <body tag use CTRL + F and show the body tag and Select the below code :  
  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' 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;div id=&quot;navbar-iframe-container&quot;&gt;&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://apis.google.com/js/plusone.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
        gapi.load(&quot;iframes-styles-bubble&quot;, function() {
          if (window.iframes &amp;&amp; iframes.open) {
            iframes.open(
                &#39;//www.blogger.com/navbar.g?targetBlogID\0753691097017525705034\46blogName\75Demo+Digital+Hub+Inc\46publishMode\75PUBLISH_MODE_BLOGSPOT\46navbarType\75LIGHT\46layoutType\75LAYOUTS\46searchRoot\75http://digitalhubinc1.blogspot.com/search\46blogLocale\75en_GB\46v\0752\46homepageUrl\75http://digitalhubinc1.blogspot.com/\46vt\75-1454459726082454287&#39;,
                {
                  container: &quot;navbar-iframe-container&quot;,
                  id: &quot;navbar-iframe&quot;
                },
                {
                });
          }
        });
      &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>
</b:section>


Select the all <b:section> Opening to ending tag then remove or delete all code and then click on save button.


After show the warning to delete and keep navbar widget then click on Delete Widget Button.

Third Method : Simply hide this Navbar using css style code

First go to Blogger.com >> your site >> Template >> Edit HTML >> Proceed. Now within the coding of your template search for the ]]></b:skin> tag and just above it paste the following CSS coding.


#navbar { height: 0px; visibility: hidden; display: none;}
#navbar-iframe { height: 0px; visibility: hidden; display: none;}
Now press “Save Template” button and the navigation bar would be removed from your site. However, in the future if you wish to restore the Navbar again then you can just remove the above CSS coding from your Template, and it would be back to normal.  

Advantage of Navbar


-when you click on the B icon, it will take you to blogger.com

- a quick link to your Dashboard and "Sign in /Sign out" dialog
- you can easily search for other blogs
- you can "Flag Blog" (if you consider content of a blog objectionable)
- NextBlog - takes you to a random, recently-updated Blogger blog

Disadvantage of Navbar


  • It's not looking professional this 20th century time.
  • It's simply show the blogger platform besides from wordpress.

-Hopefully you like this post and please reply , like & share this post.