DIY: Install a Custom Header (Blogger)

If you need to install a custom header into blogger, we have an easy tutorial for you. A custom header always gives that special finishing touch to a blog. The best part is, anyone can design and install their own header! Here are a few steps to help you on your way:

1. DESIGN A HEADER

You’ll need some sort of paint program. I use Photoshop, but you could use Paint or any other similar program if you do not have Photoshop.

I made my header size:

Width:  660 pixels
Height: 100 pixels

Once you are please with your design SAVE it by selecting “Save for Web & Devices” (this keeps the file size down which your help your blog remain fast-loading). It doesn’t matter whether you save it as a JPEG or GIF.

2. LOG IN TO BLOGGER ACCOUNT AND CHANGE SOME CODE!

Now you are ready to install your header…and do a little HTML editing.

• Click on “Edit HTML”
• Click on “Layout”
• Search for this code:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Now, change the width to whatever you set your header width to be (mine was 660 pixels, so I won’t be changing it).

Next, you’ll type in the height of your header as shown by example in the following code (in red) :

#header-wrapper {
width:660px;
height: 100px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

• Click “SAVE”.

3. Install Your Header

Now you’ll click on “Page Elements”
Then click the “Edit” button on your header box.

A dialogue box will pop up. Upload your file from your computer, select “instead of title and description” under Placement, then click “Save”.

Now take a look at your design to see if it uploaded correctly.

You’re all finished! Good job!

Don't want to miss another update, tutorial or freebie?
Subscribe to our posts via RSS feed or email and make sure to follow us on twitter!

Tweet This!

3 Responses to “DIY: Install a Custom Header (Blogger)”

1. akaGaGa says:

   March 29, 2009 at 6:34 pm

   I followed your steps, but my picture still isn’t visible. It shows up in my storage on picasa, but not on my blog. The only thing that’s different since I specified the height is that I have a big blank space.

   Help, please!
2. Sashwhy's Studio says:

   March 31, 2009 at 2:42 pm

   Sure – try saving your header image to your desktop (not in Picassa), then upload it per instructions from there. I hope that helps!
3. Nathan says:

   December 25, 2009 at 4:51 pm

   FANTASTIC! Thank you so much!
   I actually removed the borders altogether – works like a charm!
   N