Friday, April 25, 2008

How-To: Remove the top navigation panel

Maybe some of you felt the same way as I did and were annoyed by this blue top navigation panel that kind of destroys the complete page layout. Well, I'm happy to say that there is a solution for this problem. As you can see, there is no top navigation panel on my blog any more, and you can get rid of it, too!

Here are the necessary steps to remove the top navigation panel:

  1. Customize CSS Style Sheet
    On your navigation panel click on "customize" or just log in normally. Go to "Layout" > "Edit HTML". You now see the complete source code for your blog. Now, insert the following code to the <head> section of the document (between <head> and </head>).
    /* Remove top navbar */
    #navbar-iframe {height:0px; display:none;}
    For example, I added these lines at the end of the <head> section. So in my document it looks this way:
    /* Remove top navbar */
    #navbar-iframe { height:0px; display:none; }
    ]]>
    </head>

    Click on "Preview" to make sure that it works then save your changes.
    That's it, the top navigation panel should be gone now!

  2. Optional: Add Admin Options to Sidebar
    Now, with the top navigation panel gone your blog looks much nicer but there is one disadvantage: the handy quick links of the panel, such as "Create Post" or "Customize" are gone. To compensate for this, one easy solution is to add those quick links to your sidebar. To do so, log in on www.blogger.com, then go "Layout" and follow the steps described below:
    • Click on "Add a page element" in the sidebar menu to the right.
    • Search for "Link List" and add it to your blog.
    • Now click on "edit" for this newly added link list.
    • Give it a title, e.g. "Admin Options".
    • Enter a new site name, e..g. "Customization" and set the URL to http://www.blogger.com.
    • Add the link.
    • Enter another new site name, e.g. "Create Post" and set the URL to your create post page. To determine the correct link, log in, go to "Posting" > "Create" and copy the link from the address line.
    • Click the "Save changes" button.

    You are done now and have access to your blog's admin options via your sidebar!