Auto Hide/Show (Toggle) Blogger Navigation Bar

Instead of Removed the Blogger NavBar as I mention before (Removed Blogger NvBar), A lot of better if we  make it "toggle". We can set the display of the Blogger NavBar to disappear when our mouse pointer not in the Blogger NavBar position (top of our page),

To enable the Blogger NavBar Toggle function in your blog, you can follow these...

1. Log in to Blogger .
2. On your Dashboard, select the Layout menu, than click the Edit HTML. Under the Edit Template you can see your Blog's HTML.
3. If you already do "Blogger Tip Trick No.4.: Removed The Blogger NavBar", Then you must..! delete your code..

4. Then replace it / insert with this code..

/* Blogger Navigation Bar */
#navbar-iframe {
opacity:0.0;
height: 10px;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:1.0;height: 30px;
filter:alpha(Opacity=100, FinishedOpacity=100)
border: 2px;}

If you never change your Blogger NavBar before, Just insert the code. You can Look at Blogger Tip Trick No.4. to see where you must put the code. (or see #5)


5. The final position is  shown as below..

  

 

5. Finish...

How To Removed The Blogger Navigation Bar

If you bother with the view of your Blogger NavBar (top of your blogger page), then you can get rid of it with the following ways:

1. Log in to Blogger .
2. On your Dashboard, select the Layout menu, than click the Edit HTML. Under the Edit Template you can see your Blog's HTML.
3. Insert this CSS definition as shown as below...

 4.We can easily show it again by removing the CSS definition