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

What is Blogger Navbar?
Frist time somebody creates a blog in blogger.com, a bar will show up at the very top of a blog page. This bar is known as the Blogger Navbar (Blogger Navigation Bar) and it usually appears by default at the top of every hosted Blogspot blog.

Blogger navbar functions include:

• [B] (blogger logo): takes you back to bloggers homepage
• Search Blog: you can make searches on the blog and results will appear directly on the page.
• Follow: you can follow the blog youre currently viewing (blog updates will appear on your Blogger dashboard at Reading List - if youre not logged, youll see a Share link, which allows you to share you 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 in to your account, youll see your own address here. Other viewers will see their own email addresses, or none at all if they arent 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 youre logged in or not.

Blogger navbar is available in several colors, and is configured in the Template tab in Bloggers interface.

It can be useful but the only real disadvantage is visual. If you have customized design, Navbar usually doesnt fit in.

In this tutorial, Ill show you how to remove it or add a peek-a-boo effect.

Removing/Hiding the Blogger Navbar

Step 1. Go to: Dashboard > Template > Edit HTML:

 ... select the "expand widget templates" box

Step 2. Find (CTRL + F) the following line:

]]></b:skin>

Step 3. Just above it, paste this code:

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

Step 4. Save your Template.

Theres another way of showing a Navbar. It is called
"Hover Peek-a-boo Blogger Navbar":

The navbar will only appear when you hover around the area on the top. To see it in action, take a look at this demo

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


Step 1. Login to your Blogger Dashboard, then go to Design >> Edit HTML > check "expand widget templates"

Step 2. Search for the following piece of code:

]]></b:skin>

Step 3. Add the following 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 youre done!

If you have any questions, leave a comment below.

Read More..

How To Remove Blogger Navbar

WHAT IS BLOGGER NAVBAR?
Blogger has got a Navigation Bar that appears by default at the top of every Blogger-powered blog. This navigation bar can be very useful when you are blogging, but sometimes, it can get in the way. The Blogger navbar is usually hidden in most of the third party templates.

The advantages of it are the following:

- when you click on the B icon, it will take you to blogger.com
- a quick link to your Dashboard and "Sign in /Sign out" dialog
- you can easily search for other blogs
- you can "Flag Blog" (if you consider content of a blog objectionable)
- NextBlog - takes you to a random, recently-updated Blogger blog

The only disadvantage is visual. If you have customized design, Navbar just doesnt fit in.

So how we get rid of it? It is very simple. Just follow the next steps...

Removing The Blogger Navbar:

1. Login to your Blogger account, click on your blog name and navigate to Layout;

2. Look for the Navbar text and click on the Edit link as shown in the picture below:

3. When the pop-up window appears, scroll down and select Off, then click on Save button:

Youre done.

Read More..