2012-02-25

Add A Graphic To Your Header

If you want an easy way to add a graphic to your Header, go to LAYOUT and click "Edit" on the Header Page Element. you will get a "Configure Header" pop-up:

New Blogger configure Header

You can either upload an image stored in your computer or enter the URL of a photo already hosted on the web. I have added a graphic to the header of Good Hobby Ideas. What I did was crop a section of a large image of the clouds. The image was saved in my computer so I click browse and located the image. I click "Save" and waited the image to be uploaded, then click "Save changes". The first time I did it, the width of the image was too wide for the width of the blog Header. So I went into the template editor (see Backing up and changing New Blogger template). From the CSS, I found this:

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

which tells me that the width of the Header is 750 pixels. I opened the free and very good Irfanview free photo editor and resized the width of the image and save the image again. I deleted the original too wide image from the Header, then uploaded the resized image again, and you can see the result at Good Hobby Ideas. You will notice the image fits the Header nicely.