How to remove/hide or add a Peek A Boo Effect to your Blogger Navbar

What is Blogger Navbar?

First time we create a blog at blogger.com, a bar will show up at the very top of our blog page. This bar is known as Blogger Navbar (Blogger Navigation Bar) and usually appears by default at the top of every hosted Blogspot blog.

Blogger navbar functions include:
  • [B] (Blogger logo) - takes you back to Blogger's homepage
  • Search Blog - you can make searches on the blog and results will appear directly on the page.
  • Follow - you can follow the blog you're currently viewing (blog updates will appear on your Blogger dashboard at Reading List - if you're not logged, you'll see a Share link, which allows you to share your favorite blogs on social networks like Twitter, Facebook, Google buzz, and Google Reader)
  • Report abuse - you can report a blog if you consider its content objectionable (e.g., pornography)
  • NextBlog - takes you to a random, recently-updated Blogger blog.
  • email address@ - If you are logged into 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 logged in.
  • Post - Direct link to the post editor
  • Design - this link takes you to Page Elements, where you can add gadgets/widgets for your blog
  • Sign In/Out - This displays the appropriate option depending on whether you're logged in or not.
Blogger navbar is available in several colors, and it is configured in the "Template" tab in Blogger's interface.
It can be useful but the only real disadvantage is visual. If you have customized design, Navbar usually just doesn't fit in.

This tutorial will show you how to remove it or add a peek-a-boo effect.

Removing/Hiding the Blogger Navbar

blogger, what is blogger, blogger tutorials
Step 1. Log into your Blogger account, then go to "Template" and hit the "Edit HTML" button:



Step 2. Click anywhere inside the code area and find using CTRL + F keys, the following tag:
]]></b:skin>

Step 3. Just above this tag, paste this CSS code:
#navbar {
height: 0px;
visibility: hidden;
display: none;
}

Step 4. Click the "Save Template" button to save the changes.

There's another way of showing the Navbar. It is called "Peek-A-Boo Blogger Navbar" because the navbar will only appear when you hover around the top area. To see it in action, please visit this demo blog

Add a Peek-a-Boo Effect to Blogger/Blogspot Navbar

Step 1. Login to your Blogger account and go to 'Template', then press the "Edit HTML" button.

Step 2. Search for the following tag:

]]></b:skin>

Step 3. Add the following CSS code just above it:
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)

Step 4. Save the template and you're done.

12 comments:

  1. It worked PERFECTLY! Thank you so much for the easy tutorial!

    ReplyDelete
  2. Awesome Effect. Some times such simple things bring so lot of relief :P.
    I have used it in my blog programs4mca.blogspot.com

    ReplyDelete
  3. Thanks, easy and working method.

    ReplyDelete
  4. I tried the two methods, doesn't work! :( The navbar is still there and the code appears on the top of the blog

    ReplyDelete
    Replies
    1. It might be that you are putting the new code outside of the "}" symbol. That was my problem.. You have to make sure it is like this:
      }#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
      #navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)
      ]]>

      Delete
  5. Thank you so much for posting!

    ReplyDelete
  6. very nice .... helpfull...
    visit this blog for more updates..
    http://pakvsindya.blogspot.com/

    ReplyDelete
  7. works like charm. thank you!

    ReplyDelete
  8. hi actually this method didn't worked for me.. i don't know the reason but the following code from another website made the nav bar to disappear.

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

    ReplyDelete