Flag This Hub

Hover Peek-a-boo Blogger Navbar: How to Hide Blogger Navbar and Make It Visible When You Place the Mouse Cursor on It?

By

The Blogger Navbar appears by default at the top of every Blogger-powered blog.In the previous tutorials, I described how to change the color of the Blogger Navbar or remove the Blogger Navbar form you blog. But there is another way to auto hiding the Navbar without deleting permanently. This page contains the information to hide Blogger Navbar from your blog and auto visible the Blogger Navbar when you put mouse cursor on the top of the blog area.

Steps to hide Blogger Navbar and make it visible when you place the mouse cursor on it?

Follow the following steps to hide Blogger Navbar and make it visible when you place the mouse cursor on it:

Step 1: Log in to your Blogger account and accessing to Dashboard

Go to www.blogger.com and log in to your Blogger account by using your usernaeme and pasword. After successful log in, you will redirect to Dashboard. Form the "Dashboard" select the blog which you want to delete or remove or hide Blogger Navbar.

Step 2: Back-up your blog

Before doing any change of your blogger template, it's wise to back-up your blog template. You may take back-up your blogger through different ways. You may take back-up your blog design only or may take back-up your widgets only or may take back-up all of your blogs. To learn about to take back-up, you may read Blogger Safety : How to Ensure Your Blogger Safety and Ensure Your Blog's Back-up.

Step 3: Accessing the blogger template code to edit

  • Click on the Layout link of the blog you want to remove Blogger Navbar.
  • Form the "Layout" window, click on Edit HTML link.
  • Click on Expand Widget Templates.

Note: For more details, Blogspot template code: How to find and edit blogspot template code?

Step 4: Code for auto hiding Blogger Navbar and re-enabling when you put your cursor on the top area of your blogger

  • Find the following code segment form your blogger template code

]]></b:skin>
</head>
  • Copy the following code and paste it before the above code

/* 
	Code is developed by:  
		http://hubpages.com/_rt3/profile/blog 
	Blogspot Tutorial Index:
		http://hubpages.com/_rt3/hub/blog-index
	Code Description:  
		Codes for removing Bloger Navbar form your blog
*/

#navbar-iframe{
	opacity:0.0;
	filter:alpha (Opacity=0)
}

#navbar-iframe:hover{
	opacity:1.0;
	filter:alpha (Opacity=100, FinishedOpacity=100)
}
  • Now, click on Save Template button to save the changes you made..

That's all. Now, the Blogger Navbar will auto hide. Now, if you place your mouse cursor on the top of your blog, you will see Blogger Navbar. If you again remove your mouse cursor again it will auto hide.

Live Demo:

By using this tutorial, you can easily auto hide Blogger Navbar form your blog. When you place your mouse cursor on the top area of the blog, you will see the Blogger Navbar. If you again remove your mouse cursor form the top area of your blog, the Blogger Navbar again will be disabled automatically. You may see one demo of this tutorial if you wish so. By using this tutorial, the following blog is implemented. [Click the following link to view the demo]

Live Demo of auto hiding Blogger Navbar from Blogspot blog

© This tutorial is written by Blog.
For more blogspot tutorials, visit http://hubpages.com/hub/blog-index

Others are also reading...

Comments

learnbloggingtips 2 years ago

Great and good explanation for beginners...i like your site...keep doing it.

Your best friend here R.Ramesh

Shan @ Last Shreds Of Sanity 2 years ago

I have tried this, but the blogger nav bar will not show up for me.

My new template seems to be missing ANY navbar code at all. Is there a tutorial to RESTORE the navbar and then make it hover?

Please help?

June 2 years ago

Just tried this and the nav bar hides even when the cursor is present. The buttons are active, but you can't see what you are clicking on!

June 2 years ago

Found out the hack works to show Nav bar in hide or see state in Firefox but doesn't show the nav bar in IE at all.

SoEul 22 months ago

What if you use your own layout though?

Eniko 20 months ago

Thank you for the great idea, it's much better than simply hiding the navbar!!!Keep up with the good work!!!

najwaft 14 months ago

thank you so much. you explanations are real easy to understand. kudos!

Ian 14 months ago

This is fantastic! Thanks for your help!

Doe 11 months ago

nice post, i like it. Thanks U

Mikide 6 months ago

Thanks a lot

tolisx 2 months ago

Is it legal?

Avelino 7 weeks ago

Worked fine for me. I tried first this code:

#navbar-iframe {

height:5px;

}

/* IE7, IE8, IE6 */

#navbar-iframe { height/*\**/: 30px\9; }

#navbar-iframe:hover {

height:40px; !important; }

But this one, actually, only hide the NavBar "cutting" the px frame, and turns out to be difficult to place the mouse cursor on it and hover out the navbar.

The only difference on this one, was that in IE it function. But, who cares? The opacity code is way better.

Thanks!

Shaiful 2 weeks ago

Many Many Thanks' for nice posting.

Submit a Comment
Members and Guests

Sign in or sign up and post using a hubpages account.



    rancidTaste's Recent Pages

    blog's Recent Pages

    Like this Hub?
    working