How to Upload Your Own Header in Blogger

Lani from The Wooden Porch is guest blogging for me today and explaining how to put your own banner on a Blogger blog. Let’s give her a hearty welcome and leave lots of comments!

Here’s a step-by-step guide with pictures to show you how easy it is to upload your own banner into your Blogger blog and make sure that it’s positioned well and looks just as you want it without the Blogger lines around your new banner. It’s easy. I promise. I’m going to hold your hand through it all. Seriously, my grandchildren’s kids’ great-grandma can do it, and she’s a bit of a slow learner.

First, the header looked like this:

Orginal

On my computer, I made a header that I wanted to insert instead of the regular option Blogger give me.

To begin the upload, I went to "Dashboard" and clicked on "Layout":

Layout

"Page Elements" should be automatically open:

Page_elements_2

You now want to click on the "edit" option on the header portion:

Arrange_page_elements

 

A new screen will open up. You want to do three things:

  1. Upload your new header from your computer.
  2. Choose "Instead of title and description".
  3. Choose "Shrink to fit" (this resizes your header so it will fit your blog if your header ends up being too big).

A small version of your header will appear. Click "save".

By now you may be excited because you finally have your header up on your blog! However, it probably looks something like this:

Bubbles_in_box_3

Double lines are all around the header.

Bubbles_in_box2

If you like the look, great. I don’t. I want to get rid of them. To do so, choose "Edit HTML" under the "Layout" tab.

Settings_edit_html

Before you do anything else, BACK UP YOUR TEMPLATE! (Which means highlight and copy the whole HTML code and paste it into Word.) I can tell you about a popular blog designer who accidentally messed things up quite a bit for herself once when she forgot to save her template. She even knew what the heck all the HTML stuff actually meant, so that should just go to say that the rest of us need to be extra careful before we go messing around with the template. 

Scroll through the HTML code. Look for the word "header". (Here’s a quick tip for MAC users: Click on your "apple" button + F, then type in "header" in the box that opens on your screen. You’ll find it faster that way. For PC users: use ctrl+F, then type "header" in the box that opens.)

Delete the lines that refer to the border.

Border_color_html

Now it looks like this:

Header_html

Now, click "preview".

Look! No lines!

Bubbles2

Now save your template and you are done. Enjoy!

17 Responses

  1. Kim July 14, 2008 / 4:22 am

    Thanks for the advice. HTML freaks me out!

  2. Kristen July 14, 2008 / 6:37 am

    Thanks for this heads up. I have been trying to do this for the last few days, but now I think I understand what I was doing wrong!

  3. Sharon July 14, 2008 / 7:14 am

    can u upload a header in basic templates in typepad or do I need to upgrade?
    thanks

  4. Lani July 14, 2008 / 8:06 am

    Sharon, I’m not sure. I’m sorry! I only know how to do things in blogger. Melanie probably knows the answer though!

  5. Kirstin July 14, 2008 / 8:49 am

    What are popular programs for creating headers? We don’t have a graphics or photoshop program and need to get one (for Mac). Any favorites that aren’t super expensive? Thanks!

  6. Robin July 15, 2008 / 12:40 am

    YAY! I’ve been wanting to do something new.

    Are there dimensions (specifically width I guess) that I should work with when designing my header?

  7. Kirstin July 15, 2008 / 12:58 am

    Yay! You rock. Not only was ImageWell easy to use, but now I have a lovely header with no borders! Yahoo! Regarding Robin’s post, another blog I read suggested a width of 645 and that seemed to work really well. Height is up to you–somewhere around 200?

  8. Gina July 15, 2008 / 9:54 am

    I should have asked you in the first place… that thing has bugged me for SO long! THANK YOU!!!!!!!

  9. a July 24, 2008 / 2:13 am

    Thanks. Worked like a charm.

  10. Margaret August 14, 2008 / 9:59 pm

    How do I do this if I am using classic blogger also how do I make it clickable so that it returns to the homepage say if someone clicks into the archives

  11. alyssa December 22, 2008 / 7:25 pm

    it would be great, but when i uploaded my banner from my computer, it said it was “corrupt, or in an unrecognized format”. do you know what this means?

  12. Melanie Nelson January 6, 2009 / 12:38 pm

    Alyssa,

    What was the graphic file saved as: .jpg, .gif, .png, or something else? Jpg and gif are the most common ways of saving graphics and are supported on all blog platforms. Png is becoming more mainstream and may or may not be accepted on your platform (you can do a quick search in their Help files to see what that platform supports).

    You can try saving the graphic with a different extension (e.g., .jpg or .gif) and then try re-uploading it to see if that solves your problem.

  13. Amba January 17, 2009 / 5:24 am

    Thank you so much for this! It really helped me out! I knew how to put a banner on my page already but I had no idea how to get rid of the border lines! So thanks, you rock!

  14. Jo October 11, 2011 / 11:49 pm

    Hi there- any updates on how to do this- now that there is no shrink to fit option? thanks!

  15. sandra rowney December 20, 2011 / 8:05 am

    Thanks Melanie, the images didn’t show on your site but I used the words and my new artist banner is now at http://www.sandrarowney.blogspot.com Blogspot refused me for all sorts of reasons but I wouldn’t take no for an answer and kept altering image and file size until it relented!. Thanks for the instructions, I’ve put a link to your site on my blog. Sandra

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>