How To Hide Blogger Navbar

You have known blogger navbar, haven’t you? If you haven’t, you can see at the top of your blog. There you can see a bar, the bar has some important functions, they are; as blogger search, give a flag to tell blogger, log in or log out and others. Below is called as Blogger navbar:

In fact, many bloggers don’t like the presence of this navbar and want to hide it. Can we disappear it? Yes, we can. But before disappear it, please ask blogger if we can disappear it or not because I am afraid that it will break the blogger rules and will not responsible for any effect from disappearing the blogger navbar.
Disappear the Blogger Navbar

1. Log in into blogger with your ID
2. Click Layout
3. Click EDIT HTML tab
4. Click Download Full template. Back up your template first (important!)
5. Find the code which is similar to the code below, focus at the body code:

   body {
   background: #8F8E8E;
   width: 100%;
   color: #000000;
   font-size: 12px;
   font-family: Arial, Tahoma, Verdana;
   margin: 0px auto 0px;
   padding: 0px;
   }

6. Copy and paste the following code above the body  {….} :

   #navbar-iframe  {
   display : none;
   height : 0;
   visibility : hidden;
   }

7. Click SAVE TEMPLATE
8. Finished and now your blog navbar has hidden.

Besides the steps above, there is still another alternative through AUTO HIDE, this auto hide is safer from breaking the blogger rules because we don’t disappear the navbar but only hide it. If we drop the mouse to navbar, then the navbar will appear again. These steps will not work normally in Internet explorer browser but work well in other browser.
Below are the steps to hide the navbar.

1. Log in into blogger with your ID
2. Click Layout
3. Click EDIT HTML tab
4. Click Download Full template. Back up your template first (important!)
5. Find the code which is similar to the code below, focus at the body code:

   body {
   background: #8F8E8E;
   width: 100%;
   color: #000000;
   font-size: 12px;
   font-family: Arial, Tahoma, Verdana;
   margin: 0px auto 0px;
   padding: 0px;
   }

6. Copy and paste the following code above the body  {….} :

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

7. Click SAVE TEMPLATE
8. Finished and now your blog navbar has AUTO HIDE.

. I hope it is easier to understand and happy blogging

P/S: I don't want to hide, 'casue I am afraid that it will break the blogger rules