Blogger’s navbar is horizontal navigation bar located on the top of your Blogger blog, which contains some quick links. Most of Blogger users don’t wanna see the navigation bar on their blogger template due to obvious reasons. In this tutorials, I’ll show you how to remove Blogger navbar from your blog.
Before proceeding to Steps how to remove Blogger Navbar, i want to share advantages of Blogger Navbar.
A) Benefits of Navbar before Logged in:
B) Benefits of Navbar after Logged in:
1. Turn Off the Navbar :
Then Select off and click on save,You done almost then see the result.
2. HTML Code to Remove Navbar :
Go to your Dashboard > Template, click on Edit HTML button. Now find this code on Template
]]></b:skin>
Add following code above the ]]></b:skin> tag of your template.
3. Remove Widget :
Remove the Navbar widget code, look for the following code and remove it.
Before proceeding to Steps how to remove Blogger Navbar, i want to share advantages of Blogger Navbar.
A) Benefits of Navbar before Logged in:
- Blogger Logo [B]: which will take you back to www.blogger.com
- Search: You may search the entire blog you’re viewing.
- Share: May share/promote any article or posts on social websites (Twitter, Facebook and Google Reader ).
- Report Abuse: Give a flag to tell blogger about the contents of any blog.
- Next Blog: You can view the recently-updated Blogger blog.
- Create Blog: For creation of new blog.
- Sign In: Displays the option for login.
B) Benefits of Navbar after Logged in:
- After log in you will see two extra options Follow and Dashboard.
- Earlier, at the time of removing the Navbar, the issue was that whether we violate the Terms of Service of blogger as a result of which the Blog would be deleted and account may be closed.
- But, the blogger policy/TOS is silent about the Navbar removal and there is not any issue or story of a blog which has been deleted/ disabled after removal of Navbar. Further, the blogger itself has now given an option to hide or remove blogger Navbar from your blog.
1. Turn Off the Navbar :
- Go to blogger dashboard >> Layout:
- Click on the Edit
- when you click on Edit you will see the below image
2. HTML Code to Remove Navbar :
Go to your Dashboard > Template, click on Edit HTML button. Now find this code on Template
]]></b:skin>
Add following code above the ]]></b:skin> tag of your template.
#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}
Now click on save template & its done.height: 0px;
visibility: hidden;
display: none;
}
3. Remove Widget :
Remove the Navbar widget code, look for the following code and remove it.
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>
</b:includable>
</b:widget>
</b:section>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>
</b:includable>
</b:widget>
</b:section>
Note : Use Remove Widget method when nothing works for your template.
4. How to Auto Hide Blogger Navbar
This is the other option which only hide the Navbar and whenever you drop the mouse to Navbar, it will appear again. Note that it does not work for the internet explorer browser. Paste the following CSS Code after <b:skin>:
This is the other option which only hide the Navbar and whenever you drop the mouse to Navbar, it will appear again. Note that it does not work for the internet explorer browser. Paste the following CSS Code after <b:skin>:
#navbar-iframe {
opacity:0.0;
filter:alpha(Opacity=0);
}
#navbar-iframe:hover {
opacity:1.0;
filter:alpha(Opacity=100,FinishedOpacity=100);
}
opacity:0.0;
filter:alpha(Opacity=0);
}
#navbar-iframe:hover {
opacity:1.0;
filter:alpha(Opacity=100,FinishedOpacity=100);
}