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


header_installation11

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”.

header_installation2

3. Install Your Header

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

header_installation3

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

header_installation4

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

You’re all finished! Good job!



One Response to “DIY: Install a Custom Header (Blogger)”

  1. Nathan says:
    September 13, 2011 at 4:51 pm

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

Leave a Reply