How to Remove Blogger Title Bars

A Blogger.com blog, by default, has two items at the top of every blog: an address bar and a header, or title, of the blog. Removing these bars can give your blog a look that stands out from the crowd. You cannot remove either of these bars using the basic Blogger design editor, but if you access the underlying HTML code, you can manipulate almost anything on the page. Removing the address bar is a simple process of just adding some code. Removing the page's header is a little tricky, as Blogger will try to put the header back if you remove it.

Instructions

1. Visit the Blogger website to access your blog dashboard. Click the "Design" button next to the blog that you want to alter.

2. Click "Edit HTML" from the options at the top of the design page. This will bring up a large text box that is filled with the HTML code for your blog.

3. Scroll down a few lines in the text box until you see the "/* Variable definitions" entry. Click on the empty line just above this and enter the following code:

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

   This code will remove the navigation bar from the top of your blog. Click the "Save Template" button at the bottom of the screen to save your changes.

4. Press "Ctrl" and "F" to bring up a search box in your browser. Type "widget id='header1" (without quotes) into the search box and press "Enter." The code in the text box will jump to the requested line in the code.

5. Look at the line of code directly above the one you just found for the "maxwidgets" entry. Change the "1" next to "maxwidgets" to a "2." Click "Save Template" to save your changes.

6. Click the "Page Elements" option at the top of the screen to bring up the design elements of your blog. Click the "Add a Gadget" option located directly above your header bar. Click the "+" next to "Follow by Email" in the window that appears and click "Save" in the confirmation window. Click "Edit HTML" at the top of the screen to go back to your HTML editor.

7. Search for "widget id='header" again and erase the entire line that includes this piece of code. The line will start with "<b:widget" and end with "type='header'/>." Remove the line directly above this one as well. The second line starts with "<b:widget" and ends with "type='FollowByEmail'/>." By adding the extra widget to the top of the page and then removing it, Blogger will no longer replace the header bar widget when you delete it.

8. Click "Save Template" just below the text box to save your changes. A warning box will appear at the top of the page, asking you whether you are sure that you want to remove the header widget. Click "Delete Widgets" to continue. Click "View Blog" at the top of the screen to see your blog without the navigation and header bars.

References

• How2Tech: How to Remove Blogger Header Bar
• YouTube: Removing Blogger Header / Navigation Bar