1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14.
Custom Search

Thursday, November 27, 2008

How to Remove/ hide the blogger Navbar

How to remove Navbar :

This is a very common question. How do you remove the ugly looking Blogger NavBar from the top of the blog?

This is as simple as 1, 2, 3......

I am not jocking......man. Just follow the step below-

1)Log in to blogger

2)On your Dashboard, Go to Layout and hit the Edit HTML tab.

3) paste the the green colored CSS code written in the top of the template code:

...
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Rounders
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 27 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

#navbar-iframe {
display: none !important;
}

/* Variable definitions
====================
<Variable name="mainBgColor" description="Main Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="mainTextColor" description="Text Color" type="color"
default="#333" value="#333333">
...

How to Hide Navbar?

The previous method works like a dream, so why bother looking for more? The answar is simple, the Navbar contains the highly functional buttons like New Post and Customize. Can you live without those?

How about adding a button to hide/show the navbar? This way you can keep the Navbar and get rid of it in the same time....:D

How to do that? Nope, you don't have to worry about that.This is very simple too.Just follow the steps below-

1)Once again log in to blogger

2)On your Dashboard, Go to Layout and hit the Edit HTML tab.

3) paste the the green colored Javascript between your <head>...</head> tags:

<head>

<script type="text/javascript">
var showHeader=false;
function ShowHideNav()
{
showHeader=!showHeader;
var nav=document.getElementById("navbar-iframe");
if (showHeader)
{
nav.style.visibility="visible";
nav.style.display="block";
}
else
{
nav.style.visibility="hidden";
nav.style.display="none";
}
}
</script>
<style type="text/css">
#navbar-iframe {
visibility: hidden;
display: none;
}
</style>

</head>

Ok Done!! Now you have it. Just one step left. Add the following HTML code somewhere.

<span style="cursor:pointer;" onclick="ShowHideNav();">
Show/Hide Navigation
<a style="visibility:hidden;" href="http://beginner-money-making.blogspot.com"></a>
</span>

Now You can try it. Just click "Show/Hide Navigation" you will see the Navbar on the top of the page again!!!!


That's all for today, see you later folks.

Posted by Dayeen at 6:12 PM

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
 


1. 2.