Saturday, 5 January 2013

Hide or Remove Blogger Navbar

File under: Blogger Help, Customize Blog

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 www.blogger.com.
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.

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)

]]></b:skin>

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.