How to make a custom header in Blogger beta using layouts

HOW TO MAKE A CUSTOM HEADER IN BLOGGER BETA USING LAYOUTS
or
How to finally impress that hot chick down the street with your mad Blogger skillz

I've gotten several questions about this since I put that image up there*, so I'm just going to make a post about it.

Step 1.
Go into Edit Layouts.

Step 2.
Click "Edit" on the header

step 3.
Delete the header by clicking "remove page element."

EDIT. A couple people are reporting they don't have the remove element option.

If that's the case, go down to the comments and try Vz's solution. People are reporting that it works.

step 4.
Click create a new element. Pick html. (You can also pick image.)

Step 5.
Don't give it a title. Paste url of the image for your header in it.

step 6.
Your new element will be at the top of the list on the right. Drag it to where the header used to be. A spot will appear once you drag the element over there. This part can be a little tricky because sometimes it takes a second before the spot appears.

step 7.
Wow your friends and neighbors with your new, spiffy header!

*Note I don't actually have this on my blog. I wanted to keep the title Fireflies in the Cloud as text, so I just edited the header element and put the html for the image of the firefly dude in text space below.

Edited to add: This still uses the basic setup of the header in your particular template. (Like in mine there's still that border around the image and it's centered, etc.) If you want to get rid of that stuff, you can niggle with the settings in "edit html" mode instead of layout mode. Scroll down until you see "/* Header" and tweak away, or erase the whole section and see what happens. I would save a copy of your template before you do any of that advanced editing stuff.

blogger beta