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 wordpress.com 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 wordpress.com 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="http://serendipitypatchwork.blogspot.com/"><img src="http://www.serendipitypatchwork.com.au/Blog/blogbutton.JPG" 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'>
   <data:title/>
   <b:else/>
   <a expr:href='data:blog.homepageUrl'><data:title/></a>
   </b:if>
   </h1>
   </div>
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>
   
   <$BlogTitle$>
   <ItemPage></a></ItemPage>
   </h1>
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

Troubleshooting:

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!