Saturday, 5 January 2013

Pin It

Hide or Remove Blogger Navbar

Blogger provides a navbar as a default to log in and navigate to next blog with search blog. This navbar is hidden in third party templates. The advantage of blogger navbar are given below:

  • Blogger Navbar Takes you back to
  • Search box: Search Box provides the pages and post at the blog you currently viewing.
  • G+ share button: Lets you share the blog to your circles on Google+.
  • More: This drop-down lets you share the blog by email or on other social websites as well as notify our team of a Terms of Service violation by clicking "Report Abuse." You can also report abuse through  Help Center.
  • Next blog: Takes you to a recently-updated Blogger blog similar to the one you're currently viewing.
  • [email address]: If you're signed in to your account, you'll see your own address here. Other viewers will see their own email addresses, or none at all if they aren't signed in.
  • New Post and Design: If you're signed in, these links will take you to your Blogger Dashboard.
  • Sign In/Out: This displays the appropriate option, depending on whether you're signed in or not.

How To Hide Blogger Navbar

You can hide blogger navbar completely by adding some codes to your template. Follow some simple steps to hide blogger navbar completely.

  • Log in Blogger Dashboard.
  • Go to Template » Edit Html (check mark to 'expand widget template' )
  • Search out the given code in your template (Tip: use ctrl+f : to search by using your browser search bar)


Now add the given codes just above ]]></b:skin>

#navbar-iframe, #navbar { height: 0; visibility: hidden; display: none; }
Take preview and save template.

Auto Hide

If you want to add auto hide blogger navbar codes just add the given codes just above ]]></b:skin>. This will not only completely remove the Blogger Navbar but you may also find that the quick edit pencil and wrench icons are also removed. This can be a big help for people who are trying to validate Blogger templates.

#navbar-iframe, #navbar { opacity: 0; filter: alpha(Opacity=0); } #navbar-iframe:hover, #navbar:hover { opacity: 1; filter: alpha(Opacity=100); }

Now, take preview, save template and done. I hope that this information will help you :)
About Arvind Jangid
Arvind Jangid is the founder and editor of Mast Tips and Mast Blog Tips. He Shares the solutions on 'How To Series' & dedicated to share his blogging tips. Follow Him on Facebook or Twitter . See More About Him.

Liked My Post ?

Subscribe to our RSS Feed and We will let you know when we have new posts!
Or get the latest posts via Email

If You Found Something Useful, Then Kindly share This Now:
Technorati Digg This Stumble Stumble Facebook Twitter
साँझा करें Share It Now !
StumpleUpon DiggIt! Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google Twitter FaceBook


  1. Thank you so much. You have explained it very well.
    You can visit me at: Bloggerjin Tutorials


Your Suggestions are valuable for me.

Related Posts Plugin for WordPress, Blogger...

FeedBurner Updates



Email *

Message *


Follow by Email

Search This Blog

© 2011-2012. MTS-Mast Tips n Tricks All Rights Reserved Arvind Jangid, Sikar, Rajasthan, Ph. +919413159634 . Template by Mast Blog Tips | Back To Top |