Saturday, August 12, 2006

How to create a personal blog banner

24 May 2007: Blogger now has a "header widget" that enables you to insert an image from the hard drive of your own computer as your banner without mucking around with any code (at long last!) so I will be updating this tutorial soon. In the meantime, check out the tutorial in the sidebar of Carol Clasper's blog.

Alternatively, the steps set out below involve minimal changes to your template code. However, please note that this tutorial does not appear to work for images with Blogger urls (ie images posted on Blogger) or with images posted on certain photo storage services such as webshots, yahoo or flickr. If you are able to post your image on your own website server (or a friend's!) or a blog, then this tutorial works VERY well.

Image preparation:
  1. Find your favourite photo or photos.
  2. Using a photo manipulation program (eg Photoshop Elements), resize the photo(s) to approximately 600 - 700 x 100 - 150 pixels and add any text you desire such as the blog name and description. (Tip: If you look near the beginning of the code for your blog template, you may see something like "#header { width:660px; " or #content { width:660px;" which may assist you in working out the optimum dimensions of your banner image. )
  3. Save the new image in a memorable place on your hard drive.
  4. “Park “ the new image on your own website server or a friend's blog. (This tutorial does not appear to work with images with Blogger urls or with images posted on certain photo storage services such as flickr or yahoo.)
  5. Right click on your parked/posted image to find its url (look under “Properties”). Some photo storage services resize your image so try to find the url of the largest size image. For example, if you have posted your image on your blog, it has probably been resized so you should double click to take you to the larger image and then right click for the url.
  6. Cut and paste the url details into a word document, notepad or similar where you will compose the code for your banner.
I created this banner with Arcsofts’ Photo Impression software which came with my digital camera:

Banner Code preparation:

Here is the magic code:

<a href="http://insert the url for your blog/"><img src="http://insert url of your banner image" alt="insert blog title " /></a>

For example:

<a href=""><img src="" alt="Serendipity & the Art of the Quilt Blog" /></a>

This code does three things. It points to the beginning of your blog. It finds wherever you have parked your image. And it shows some text when you "hover" over the image (although this may not show up in some browsers). You can use the same code (but smaller image) to create a blog button.

Template edits in "New" Blogger:

  1. Log into your Google/blogger account and click on “Customise” on your dashboard.
  2. If you haven't already done so, you may need to "upgrade" your template. Be aware that taking this step will mean that many customised elements (eg third party counters) will be deleted and will need to be reinstated later. This tutorial only deals with how to insert your personalised banner.
  3. Click on Template and "Edit HTML".
  4. Take the opportunity to save a copy of the code for your existing template.
  5. Scroll down to "Edit Template" and tick/check the "Expand Widget Templates" box.
  6. Scroll through your code until you find something like this:
    <div class='titlewrapper'>
    <h1 class='title'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  7. Replace the tags highlighted in red with the code you prepared for your banner.
  8. Click on “Preview”.
  9. If everything looks OK, click on “Save Template”.

Template edits in Old Blogger:

  1. Log into your account and click on “Change settings” on your dashboard.
  2. Click on Template and scroll down to the code for your template.
  3. Copy and paste all of the existing code for your template and save it in a safe place. (I recommend that you use "notepad" (or Mac equivalent) for this task. This a standard Microsoft accessory and it saves code without any extraneous formatting that MS Word might like to throw in. ) This saved code is your back up and means that you can revert to the status quo if all else fails. This is especially important if you have added links, counters and other customised options to your blog.
  4. Scroll through your code to find something like this:
    <h1 id="blog-title">;
    <ItemPage><a href="<$BlogURL$></ItemPage>
  5. Replace the tags highlighted in red with the code you prepared for your banner.
  6. Click on “Preview”.
  7. If everything looks OK, click on “Save Template Changes” and republish your blog


If it doesn’t look right, it is probably because there remains some formatting code for your old look. It’s impossible for me to troubleshoot all the variables in this general guide but here are some likely suspects:

1) If there is a border showing up at the top of your blog (and you don’t want it). Find and delete the code relating to the borders. For example, in the new "Minima" blogger template:

  • From under the lines " #header-wrapper" and " #header " delete: border:1px solid $bordercolor;

and in the old “Minima” blogger template:

From under the line “#header” delete: border:1px solid #ccc;

  • From under the line “#blog-title”delete: border:1px solid #eee; border-width:1px 1px o;
  • From under the line “#description”delete: border:1px solid #eee; border--width:o 1px 1px;
2) Your banner image may be too wide for your particular Blogger template. Never fear, you can resize your image without going back to your photo manipulation software simply by fixing the banner size in your code. You do this by adding width = "650" height = "125" (or whatever are the relevant sizes for your template) imediately before the "alt" part of your banner code. For example:

<a href="http://insert the url for your blog/"><img src="http://insert url of your banner image" width="insert number of pixels"height="insert number of pixels"alt="insert blog title " /></a>

Different browsers have different formatting tricks so, for example, even if everything looks fine in Internet Explorer, do not be surprised if you receive feedback from Firefox users who report that your banner is out of alignment. In my experience, these alignment problems can usually be fixed with a little tweaking and I am happy to help if you e-mail me.

Of course, there are many other steps you can take to customise the colours and appearance of your blog. Don't be afraid to get down and dirty with the code!


Blogger Emily said...

Brenda, this is fantastic. I will try it sometime this weekend. Thank you!!

August 12, 2006 1:31 pm  
Blogger Diane said...

Thank you for posting this, Brenda! I was wondering about this but was too lazy to go find out...You've made it easy! Thanks1

August 13, 2006 4:17 am  
Blogger Leah said...

Thanks Brenda for such easy to follow instructions. I found your site tonight through SCQuilters, although I've visited before through some links via links via links via....

August 13, 2006 9:39 pm  
Blogger judy coates perez said...

Thanks for posting this brenda. All that coding looks so scary. you made it so easy.

August 17, 2006 1:32 am  
Blogger Shelina said...

Thank you so much for posting this Brenda. As you can see I am terribly behind in reading my blogs, even though you told me it was here. My daughter is fighting for the computer, so I will be back to actually create my own banner. In the meantime I have to think about what photo I want that represents me or my blog. Hmmm. I think that will be the hard part.

August 17, 2006 5:53 am  
Blogger MargaretR said...

Brenda you are a wonder. I have been trying to find out how to do this for some time. I shall try it out and will let you know if it works for me. Thanks so much for your generous help here.

August 27, 2006 2:09 am  
Anonymous Anonymous said...

howdy brenda, your instructions are fantastic, however i've come to a bit of a dilemma in that when i preview my page after making changes it appears the way i want it to, however when i click 'save changes', and republish my entire blog, the changes are not made. what am i to do!?


September 12, 2006 9:32 pm  
Blogger Brenda said...

Max's problem was easily solved. All that was required was to refresh the cache on his browser :-)

September 13, 2006 8:12 pm  
Anonymous sheilaC said...

Thank you Brenda for time spent helping me, and if the code just can't be broken fully try the colour section. White on white doesn't show. Thanks again.

November 08, 2006 12:00 am  
Blogger julie said...

Thanks so much!

November 09, 2006 6:59 am  
Blogger catsmum said...

looks definitely do-able Brenda. thanks.
I can cope with basic html but hadn't even thought of doing something like this for the header.

November 16, 2006 12:57 pm  
Blogger Chickengirl said...

Thank you so much. Your directions were easy to follow and I got my banner up with little trouble. Yay!

November 18, 2006 9:48 am  
Blogger Cori said...

Oooh, thanks so much for giving such detailed instructions!! I know what I'll be trying tonight!

December 30, 2006 11:43 am  
Blogger MissK said...

Wow! Thanks for this!

January 03, 2007 3:44 am  
Blogger Tammy said...

Thank you thank you thank you for posting was the only website I found where I could actually understand what to do...and it worked! Thanks again!

January 06, 2007 3:30 pm  
Blogger Helen said...

Thanks for this Brenda! I did it!!!! It works! Thanks for making it so easy. :)

January 17, 2007 3:13 pm  
Blogger mdk jewelry designs said...

I can not wait to get a moment to try this. I googled "inserting a banner into a blog", and it listed your site. Thank you so much.
I am building my blog for my jewlery site.

misti dawn kallas

February 20, 2007 1:05 am  
Blogger Alis said...

Fabulous! Such easy to follow directions. Thank you for helping me get my fab new banner.

April 10, 2007 10:10 pm  
Anonymous Anonymous said...

Thanks for the step by step. It was easy to follow.

April 22, 2007 2:09 am  
Blogger Sherrie said...

Hi Brenda,
I think I followed all the directions but I get this result

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute "href" associated with an element type "a".

Any ideas?

April 23, 2007 9:15 am  
Anonymous Anonymous said...

Thanks for posting this! It's very helpful info to have.


June 27, 2007 2:23 am  
Anonymous Anonymous said...

Wow awesome info! This is great for all kinds of sites. Thanks for posting this.


June 27, 2007 2:24 am  
Blogger Kyra said...


Thanks for this post. I always wondered how folks created such lovely headers. I'll have to give it a try!

Best, Kyra

August 22, 2007 8:49 pm  
Anonymous Anonymous said...

thanks so much for this

December 22, 2007 6:13 am  

Post a Comment

<< Home