Adding a Custom Header in Blogger

With the new version of Blogger, I found that it was difficult to insert a custom header image. I searched around on the internet, but didn't find a satisfactory explanation. So I managed to figure out how to do it and thought I would share these easy steps for those of you who might be curious how to do this yourselves.

Step 1) Create a custom header image for your blog. Use Photoshop to create an image that is 650 pixels wide by 79 pixels high and upload it to your webserver. Below is the one I made for LaCour:


Step 2) Log in to Blogger.com and click the "Manage: Layout" button


Step 3) Then click on the "Edit HTML" button


Step 4) Scroll through the HTML and find the section that looks like the following (which is about 1/4 of the way down):

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Now add in the following url, width and height tags so that it looks like this:

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
background-image: url('http://www.lacourphoto.net/images/bloghead.jpg');
width:650px;
height:79px;
}

Be sure to add the appropriate url for your banner image and make sure that your width and height numbers are correct for your image. *Note: If you want to remove the border, simply change the border to 0 in the "#header-wrapper" section just above this section.

Step 5) Scroll through the HTML and find the section that looks like the following (which is about 1/2 of the way down):

<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>

Now make it look like this:

<h1 class='title'>
<!-- <b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if> -->
</h1>

Step 6) Click the 'Save Template Button' and your blog should now have a custom header.