Friday, May 4, 2007

Blogger 101: Banner Photo

As I mentioned on the Cafe Mom Discussion board, I learned today that blogger now has an auto-insert picture function for the header background (e.g. the tulips above). In case you didn't pick up on the hints elsewhere, here are the directions...

You get to it by clicking on the "edit" button for the page header bar under "page elements" (which is under "template").

Add your photo and *presto*!

A couple of important tips:

You'll need to size your photo "just so" to fit with your template. Nothing like trial and error.

I would suggest keeping the photo size reasonably small - perhaps under 100 kb for the sake of those with slower-loading computers. (the tulip one is about 70 kb).

Try to get a picture with room for your title and description AND/OR adjust your blog title color so it's readable with the picture. I "photo-shopped" out two tulips to make this one fit better.

Warning: At the moment, adding the photo to the banner seems to gum up the preview mode in the "fonts and colors" window. Not critical, but annoying.


Melissa Wiley said...

Alicia, what a breath of fresh air it was to load this page! Beautiful. :)

Christine M said...

Yay - thanks for this - I actually got this to work for me - though I had to take out my description line - but it wasn't a big loss.

Shawna said...

I just tried it today, and I love it. Thanks!

Ana Braga-Henebry said...

Alicia, I don't see "elements" under my template in blogger. I guess I had not upgraded my template to new blogger. How much will I lose?

Beth: said...

I wonder if this was a recently added feature to the template because I have had new blogger for a while now and have been wanting to add a photo to the banner for ages: but the option to upload a photo wasn't there, I swear! lol It is now **blush**

Love2Learn Mom said...

Thanks all! :)

Christine - Yes, I'm missing the description on the blog I finally got to add the banner to. It was a quote that I REALLY like. I'm thinking of trying to add it in between the banner and the main post area.

Yes, Ana, I think you need the new template. I would copy and paste your entire template before transferring because you might lose a link or two. Overall the transfers have tended to go quite well. You'll need to re-load your statcounter (assuming you have one) too.

Beth - I think this is really new. I only discovered it today after just talking over the coding with Karen on the Cafe Mom thing yesterday.

Kristen Laurence said...

Alicia, this is so fun. Thank you! One question: How do I resize my header picture to 100 kb?

Ana Braga-Henebry said...

This is what I did to solve the trial & error sizing problem: I used a picture from my own camera from Picasa (a Scrabble game in process on my Brazilian board).
1. I copied the picture onto Paint.
2. I expanding the workspace on Paint quite a bit by dragging the corner point out
3. Using the Printscreen keyboard button (such a powerful and useful tool), I copied my blog title box onto paint and cropped.
4. I cropped my Scrabble picture to fit in. Pronto!
Any questions? I also posted this as a reply to Shawna's question on the forum.

Love2Learn Mom said...

You can also look into your html coding to find out the width of your header. As I understand it, saving it as a .jpg tends to result in a smaller file than some other formats.

Suzanne Temple said...

You are great, ladies! I used Paint like Ana suggested and shrunk my banner to a reasonable size. Thanks!

Matilda said...

Any helpful hints on how to take a picture and turn it into a repeating picture for a banner. Like Karen E's. I have a picture I would like to use, but it is too small to make into a header. I would like to have it repeat all the way across the banner.

Mary G said...


Just use paint and copy it -- this is the easiest fix and you can change the sizing, placement and even tip it a bit if you'd like... paint is one of those always loaded software packages that I don't use enough -- and yet it's so simple to use!

Mary G said...

My question on the banner -- which I'm so glad Blogger is finally letting us do!

OK, how do you center your banner -- for some reason, mine is way over to the left and I can't center it????

christinemm said...

Thank you for this post. I have wanted a photo banner for about a year but struggled to teach myself with online tutorials and could not get it to work. I had not realized Blogger made it easier for us now by having a tool for that.

I added a photo banner last night. I then updated my blog with a new template and even put in a new photo of myself.

And Melissa you had left a comment on my blog. Your blog was one of the ones that used to crash my computer. That is why I took you off of my blog roll reading list and why I stopped reading your Bonny Glen blog. I will see if I can read it now that you have made some changes.

I have not yet switched to Firefox browser, the last time it was making some other problem, I don't recall the details.

Thank you for posting this tutorial.