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!

Comments

  1. Thanks for the advice. HTML freaks me out!

  2. 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. can u upload a header in basic templates in typepad or do I need to upgrade?
    thanks

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

  5. 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. Kirstin, check out this post:

    http://www.bloggingbasics101.com/101/2008/02/is-there-any-fr/

    Melanie wrote about that awhile back ago. I haven’t tried any of the links she provides because I have Adobe InDesign that I use… it’s an $800 program though.

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

  8. 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?

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

  10. Thanks. Worked like a charm.

  11. Bloody Brilliant!!

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

  13. 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?

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

  15. 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!

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

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

Speak Your Mind

*

css.php