Friday, July 27, 2007

Add graphic to blog Header: Easy way

I have previously publish a post Another way of adding graphic to your blog Header (click BACK button to get back to this page), but the result wasn't satisfactory. I had no time to do further testing. Now I have.

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.

Related posts (click BACK button to get back to this page or close new window if link opens in new window):
Adding graphic, Advertisements, etc., to your blog Header

Special fonts for your clickable image Header without having to delete the blog text title

Put image or logo at the side of blog Header

Another way to add graphic to your Header

11 comments:

  1. Hey,
    nice to find your amazing tips blog. At the moment I suffer header-image-invisibility, which started when I decided to change my template and lost some of the customization of my blog.
    Do you have any idea why Blogger doesnt want to give me the (simple) desired result of having an image in the header?
    Can I hack something instead?
    Thanks.

    ReplyDelete
  2. Hi ek-fyles,

    I do not know what is your problem, however, I have to add I haven't tried tangling with graphic header for long time. What I know is Blogger has added more ways to add graphic to header. When you change template, losing customization is nothing strange. You just have to put it back.

    Peter Chen Blog*Star
    Dream Driven Life(TM)

    ReplyDelete
  3. I have a graphic (book cover) that includes title and description. Blogspot gives you the option of placing a title and description (text) in front of a graphic, OR using the graphic WITHOUT a title and description (text).

    BUT, when I chose the "instead of" option, it tells me I can't omit required elements. Huh?

    How do I get around this contradictory system?

    Thanks!

    ReplyDelete
  4. I just tested this method of replacing the text title with graphic (a jpeg image) and it worked fine. What graphic did you use?

    ReplyDelete
  5. Hello again Peter Im having a bit of a problem I have downloaded this template

    http://www.blogcrowds.com/resources/blogger-templates/45-sky3c

    However, when I upload an image it doesnt change the default image remains.

    ReplyDelete
  6. Hello again Peter Im having a bit of a problem I have downloaded this template

    http://www.blogcrowds.com/resources/blogger-templates/45-sky3c

    However, when I upload an image it doesnt change the default image remains.

    ReplyDelete
  7. What image? Header image? Blog background image?

    ReplyDelete
  8. The header image the one of the sky it still there when I upload the picture from my computer which is 600 x 480

    ReplyDelete
  9. The Defualt sky header image is what I mean

    ReplyDelete
  10. Try this - Adding graphic background to blog Header. Do let us know if that solved your problem

    ReplyDelete
  11. Hello again Peter that didnt work I think what it is is that the default header image is somewhere in the html code so I think I have to go there and remvoe it and then it can become visible when I just edit the header image as you post said

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics