create your own

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

70
rate or flag this page

By blog


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

Print   —   Rate it:  up  down  flag this hub

Comments

RSS for comments on this Hub

learnbloggingtips  says:
5 months 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  says:
3 weeks 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?

Submit a Comment

Members and Guests

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


optional


  • No HTML is allowed in comments, but URLs will be hyperlinked
  • Comments are not for promoting your hubs or other sites


rancidTaste's Recent Pages

blog's Recent Pages

working