Adding a graphic banner to your blogger header

When you’re logged in, go to the template tab, and the page elements link. It says “add a page element” for your sidebar, but it doesn’t offer you that at the top by your blog title. You have to edit the code to give yourself the ability to add an element.

To have an “Add a Page Element” option, under “Template”, click “Edit HTML”.Scroll down and towards the bottom, you will see these lines:-

<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Change them to this:-

<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

This will give you 2 more page elements that you can add to your Header.

Right after that are these lines:-

<div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'>

Change them to this:-

<div id='main-wrapper'> <b:section class='main' id='main' showaddelement='yes'>

You are now able to add Page Elements at both the top and bottom of your blog.

Once these are done, Save the Template. Click the “Page Elements” tab, and you will now see “Add a Page Element” option at the top of the Header and Blog Posts. Click Add a Page Element and select “Picture”. You should be able to click Edit on your Picture page element. You can upload your banner here.

Once you’ve got your banner showing, you’ll probably want to remove the old title. You’ve got to go back and edit the html once more.

Go to Template -> Edit HTML.Scroll to where you see this code where your blog title is shown in the part marked orange:-

<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE (Header)' type='Header'/>

Change the locked='true' to locked='false'. Save and click the “Page Elements”tab. When you “Edit” your Header, you will now see a “Remove Page Element”option. Remove it if you want, and refresh the your home page. You should no longer see your title displayed.

Remove border around Header

When you go to Template -> Edit HTML, you will see somewhere near the top a style defined for the #header-wrapper and #header. There is a setting for the border. It may be at 1px width with a solid, dotted or whatever line, of a certain color. To remove the border, either delete this setting entirely or change the 1px to 0px width. Preview the template and if you like what you see,save it. There were two places that I changed from 1px to 0px. That’s it. Then you’re all done.