Search Google and/or this blog

Sunday, March 15, 2009

Remove / Hide the blogger Navigation Bar

Stumble del.icio.us Reddit MyWeb! Facebook Google bookmark

Well, the next thing I wanted to do in my blogs is hiding the blogger navigation bar. The way blogger has designed all its templates, you are not given an option to hide the navigation bar. So ideally speaking it means they always want you to show the nav bar. But there is a way around ... :). For example you don't see any navigation bar on this blog ..right ??? Ok here you go on how to do it in few simple steps ...
[YOU ARE ADVISED TO "DOWNLOAD FULL TEMPLATE" BEFORE YOU MESS WITH ANYTHING.]

  1. Go to your dashboard and select "Layout" tab.
  2. Click "Edit Html".
  3. Check the "Expand Widget Templates" checkbox.
  4. Scroll down until you find "#header-wrapper" or better still just copy paste everything from the textbox into a notepad and then do a Ctrl+F for "#header-wrapper".
  5. Copy and Paste the following just below #header-wrapper {width:880px; margin:0 auto 10px; border:1px solid $bordercolor;}

  6. #navbar-iframe { display: none !important; // hide the navigation bar}

  7. This should now look like this:

  8. /* Header
    -----------------------------------------------
    */

    #header-wrapper {
    width:880px;
    margin:0 auto 10px;
    border:1px solid $bordercolor;
    }
    #navbar-iframe {
    display: none !important; // hide the navigation bar
    }


  9. Save settings. and you are done. Enjoy!!
  10. And yeah ! don't worry you can always goto dashboard or in edit mode when you login by going to blogger.com.


If you want to know, how this works ..here it is :
1. Basically, if you right click anywhere on your blog page and take a look at the page source, you will find something like this

<style type="text/css"> #navbar-iframe { display:block }
</style>

</head>
<body>

<div class='navbar section' id='navbar'><div class='widget Navbar' id='Navbar1'><script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener("load",
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
</script>
<iframe src="http://www.blogger.com/navbar.g?targetBlogID=8223219756526365841&blogName=Rants+And+Raves...+aur+Kya+%3F&publishMode=PUBLISH_MODE_BLOGSPOT&navbarType=BLACK&layoutType=LAYOUTS&homepageUrl=http%3A%2F%2Faskjha.blogspot.com%2F&searchRoot=http%3A%2F%2Faskjha.blogspot.com%2Fsearch" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" height="30px" width="100%" id="navbar-iframe" title="Blogger Navigation and Search"></iframe>

......
etc ...
etc..



If you see the frame Id is named as navbar-iframe

Thus if we change the style in CSS (cascading style sheet, which defines how your page should look) and make the display style to "none", the navbar will stop appearing in the page. :) . That's how it works !!!

Posted by Yours truly ...
Labels: ,

0 comments:

Post a Comment

Leave your opinion here. Or let me know if you face a problem ...I'll try to get back to you as soon as I can.

Subscribe to: Post Comments (Atom)