The Blog Doctor.

Yet Another Table of Contents YATOC.

Here is Yet Another Table of Contents - The YATOC Gadget. It is based on the Google AJAX API. You can use it to Make a Sitemap Page for your blog. See picture below :

You can see the demo at top of posts column in My Gadget Showcase blog. It shows all the post titles in the blog linked to respective posts. It is based on official Google AJAX code. Here are the steps to install it..................

INSTALLATION

To install this gadget follow these steps :

1. Login at Blogger.com.

2. Click Layouts link under blog title on Dashboard.

3. Click 'Add Gadget' link on Layout---->Page Elements subtab.

4. In popup window scroll down and click Html/Javascript gadget.

5. Copy all the code below :

<!--
  Copyright (c) 2008 Google Inc.

  You are free to copy and use this sample.
  License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
      google.load("gdata", "1.x", { packages : ["blogger"] });
    </script>
    <script type="text/javascript">
      function _run() {
        var content = document.getElementById('content');
        var bloggerService =
            new google.gdata.blogger.BloggerService('com.appspot.interactivesampler');
        var feedUri = 'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999';
        var handleBlogPostFeed = function(postsFeedRoot) {
          var posts = postsFeedRoot.feed.getEntries();
          var html = '';
          html += '<dl>'
               + '<dt><strong>Blog:</strong> '
               + '<a href="'
               + postsFeedRoot.feed.getLink('alternate').getHref()
               + '">'
               + postsFeedRoot.feed.getTitle().getText()
               + '</a></dt>';
          html += '<dd><ul>';
          for (var i = 0, post; post = posts[i]; i++) {
            var postTitle = post.getTitle().getText();
            var postURL = post.getHtmlLink().getHref();
            html += '<li><a href="' + postURL + '" target="_blank">'
                      + postTitle
                      + '</a></li>';
          }
          html += '</ul></dd>';
          content.innerHTML = html;
        };
        var handleError = function(error) {
          content.innerHTML = '<pre>' + error + '</pre>';
        };
        
        bloggerService.getBlogPostFeed(feedUri, handleBlogPostFeed, handleError);
      }
      google.setOnLoadCallback(_run);
    </script>
<div id="content" style="width:100%;">Loading...</div>
Get This Gadget at <a href="http://www.blogdoctor.me/2009/01/yet-another-table-of-contents-yatoc.html">Yet Another Table of Contents-YATOC.</a>

6. Paste in contents window on HTML gadget popup window.

7. Change 'MYBLOG' in the code to actual subdomain of your blogspot.

8. Save Gadget.

9. View Blog. Wait for page to load completely for gadget to load.

10. Enjoy your sitemap!

Random Rotating Post Gadget with Excerpt.

If you have a blog with more than 20 posts than this gadget is just the thing your blog needs :

Click on above picture to enlarge it. You can see it above the posts column in this blog when the page is completely loaded. Features :

1. Shows one post title at a time.
2. Links to the post.
3. Shows post excerpt also.
4. Every 5 seconds shows a new post.
5. Cycles through all the posts in the blog.
6. Starts a new cycle at the end of the list.
7. Once loaded continues cycling even when not connected to the Internet.
8. Uses official Google AJAX technology.
9. Can be used on other blogging platforms (not tested).
10. Hovering with mouse cursor over the post title halts the rotation till mouse moves off the gadget.

............................................

Bloggers with plenty of posts in their blogs face a major problem in showing all of them to the viewers. Some solve this by changing the settings to show all the posts in Main Page. This slows down the loading speed of the blog and can turn away visitors.

The Blog Archive gadget which comes as a default with the standard Blogger Layouts shows only the posts in the blog for the present month. The rest of the posts are hidden and can be seen only by clicking the black arrows to expand the archives. This saves the real estate on the blog page but to the new visitor hides the previous months blog posts.

One can eliminate the dates in the Blog Archive and show all your posts in a blogger gadget but this makes a very long sidebar and if you have posts with little content this may make the blog seem lopsided.

To save space and yet show all posts one by one this gadget uses official Google AJAX API Feed technology and the Dynamic Feed Control. It fetches the post titles and data from your blog and displays it in the gadget. To install this on your blog :

1. Login at Blogger.com.
2. Click Layouts link on Dashboard.
3. Click Add Gadget link in sidebar on Page Elements subtab of Layout tab.
4. In popup window scroll down and click Html/Javascript gadget.
5. In Contents window copy the code below and paste after modifying it :

<style type="text/css">
    .gfg-root {
  width : 100%;
  height : auto;
  position : relative;
  overflow : hidden;
  text-align : center;
  font-family: "Arial", sans-serif;
  font-size: 20px;
  border: 1px solid #BCCDF0;
}

.gfg-title {
  font-size: 24px;
  font-weight : bold;
  color : #3366cc;
  background-color: #E5ECF9;
  line-height : 1.4em;
  overflow : hidden;
  white-space : nowrap;
}

.gfg-title a {
  color : #3366cc;
}

.gfg-subtitle {
  font-size: 20px;
  font-weight : bold;
  color : #3366cc;
  background-color: #E5ECF9;
  line-height : 1.4em;
  overflow : hidden;
  white-space : nowrap;
  margin-bottom : 0px;
}

.gfg-subtitle a {
  color : #3366cc;
  display:none !important;
}

.gfg-entry {
  background-color : white;
  width : 100%;
  height : 6.9em;
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-top : 3px;
}

/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
  position : relative;
  background-color : white;
  width : auto;
  height : 100%;
  padding-left : 20px;
  padding-right : 5px;
}

.gfg-list {
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-bottom : 5px;
  display:none !important;
}

.gfg-listentry {
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
  text-overflow : ellipsis;
  -o-text-overflow : ellipsis;
  padding-left : 15px;
  padding-right : 5px;
  margin-left : 5px;
  margin-right : 5px;
}

.gfg-listentry-odd {
  background-color : #F6F6F6;
}

.gfg-listentry-even {
}

.gfg-listentry-highlight { 
  background-image : url('garrow.gif');
  background-repeat: no-repeat;
  background-position : center left;
}

/*
 * FeedControl customizations.
 */

.gfg-root .gfg-entry .gf-result .gf-title {
  font-size: 24px;
  line-height : 1.2em;
  overflow : hidden;
  white-space : nowrap;
  text-overflow : ellipsis;
  -o-text-overflow : ellipsis;
  margin-bottom : 2px;
}

.gfg-root .gfg-entry .gf-result .gf-snippet {
  height : 3.8em;
  color: #000000;
  margin-top : 3px;
}

/*
 * Easy way to get horizontal mode, applicable via js options to gadget.
 */

.gfg-horizontal-container {
  position : relative;
}

.gfg-horizontal-root {
  height : 1.5em;
  _height : 100%;
  position : relative;
  white-space : nowrap;
  overflow : hidden;
  text-align : center;
  font-family: "Arial", sans-serif;
  font-size: 13px;
  border: 1px solid #AAAAAA;
  padding : 5px;
  margin-right : 80px;
}

.gfg-horizontal-root .gfg-title {
  font-weight : bold;
  background-color: #FFFFFF;
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
  float : left;
  padding-left : 10px;
  padding-right : 12px;
  border-right: 1px solid #AAAAAA;
}

.gfg-horizontal-root .gfg-title a {
  color : #444444;
  text-decoration : none;
}

.gfg-horizontal-root .gfg-entry {
  width : auto;
  height : 1.5em;
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-top : 0px;
  margin-left : 0px;
  padding-left : 10px;
}

/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
  position : relative;
  background-color : white;
  width : 100%;
  height : 100%;
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
}

.gfg-horizontal-root .gfg-list {
  display : none;
}

/*
 * FeedControl customizations.
 */

.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
  display : none;
}

.gfg-horizontal-root .gfg-entry  .gf-result .gf-title {
  color: #0000cc;
  margin-right : 3px;
  float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
  float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
  display : block;
  color: #AAAAAA;
}

.gfg-branding {
  white-space : nowrap;
  overflow : hidden;
  text-align : left;
  position : absolute;
  right : 0px;
  top : 0px;
  width : 80px;
}

.gfg-collapse-open, .gfg-collapse-closed {
  background-repeat : no-repeat;
  background-position : center;
  cursor : pointer;
  float : right;
  width : 17px;
  height : 20px;
}

.gfg-collapse-open {
  background-image : url('arrow_open.gif');
}

.gfg-collapse-closed {
  background-image : url('arrow_close.gif');
}

.gfg-collapse-href {
  float : left;
}

.clearFloat {
  clear : both;
}
body {
      background-color: white;
      color: black;
      font-family: Arial;
      font-size: small;
      margin: 0;
    }
    #feedGadget { 
      margin-top : 5px;
      margin-left: auto;
      margin-right: auto;
      width : 440px;
      font-size: 16px;
      color: #9CADD0;
    }
</style>
<script src="http://www.google.com/jsapi/?key=PUT_AJAX_KEY_HERE" 
 type="text/javascript"></script>
  <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>

  <script type="text/javascript">

    function showGadget() {
      var feeds = [
       {title:'title',
        url:'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},
       
       ];

      new GFdynamicFeedControl(feeds, 'feedGadget',
                               {numResults : 1000, stacked : true,
                               title: "BLOG_TITLE ~ Random Posts."});
    }
    google.load("feeds", "1");
    google.setOnLoadCallback(showGadget);
  </script>
<div id="feedGadget">Loading...</div>
  <div id="feedGadget">Gadget by <a href="http://www.blogdoctor.me" target="_blank">The Blog Doctor</a>.</div>

In the above code make changes in the following parts :

 <script type="text/javascript">

    function showGadget() {
      var feeds = [
       {title:'title',
        url:'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},
       
       ];

      new GFdynamicFeedControl(feeds, 'feedGadget',
                               {numResults : 1000, stacked : true,
                               title: "BLOG_TITLE ~ Random Posts."});
    }

Change "MYBLOG" to actual blog subdomain and "BLOG_TITLE" to actual title of your blog. Then paste the modified code in the Html gadget and save the gadget.

Get your AJAX API key and put it in above code instead of 'PUT_AJAX_KEY_HERE'.

Lastly click and drag the HTML gadget from the sidebar to above the posts column. See picture below.

This is because the width of the gadget is more suited for the posts column than the sidebar. Save the Layout. View Blog.

If you do not want to save space you can show the whole Table of Contents with post preview.

The Meta Gadget for Blogger.

Ajax Blog List Gadget with Post Preview.

Add Myspace Layouts to Blogger Blogs.

Show Top Labels Only In Labels Widget.

As you write more and more posts you will keep adding labels to them to categorize your posts. You can add more than one label to any single post. Labels are useful as they serve as keywords channelling traffic to your posts through search engines like Technorati.

However the list of labels in your blog can get to be very long stretching your sidebar until your blog post looks like a flag on top of a long sidebar. To prevent this you can modify the code of your Labels widget to show only the topmost labels in your blog..............

LIMIT LABEL NUMBER

To limit the number of labels shown in your Labels sidebar widget login at Blogger.com and click 'Layout' link on Dashboard. The Page Elements subtab of Template tab will open. If you do not have a Labels widget in the sidebar Add a Labels Page Element to it.

After the Labels widget is added click on Edit Html subtab of Template tab. This will open the Template code box on the Edit Html subtab. Click the Expand Widgets Template checkbox on top of the Template code box to put a check mark in it. The Template code box will show the expanded widgets templates.

Scroll down in the Template code box to locate the code for the Labels widget. This will look like this :

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <b:if cond='data:blog.url == data:label.url'>
          <span expr:dir='data:blog.languageDirection'>
            <data:label.name/>
          </span>
        <b:else/>
          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
            <data:label.name/>
          </a>
        </b:if>
        <span dir='ltr'>(<data:label.count/>)</span>
      </li>
    </b:loop>
    </ul>

    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

REPLACE THE WHOLE ABOVE CODE WITH THE CODE BELOW :

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'> 
<b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
    <ul>
      <script type='text/javascript'>
        var labelnum = 0;
        <b:loop values='data:labels' var='label'>
        if (<data:label.count/> &gt; 2) {
           document.write(&quot;<li><a expr:href='data:label.url +  "?max-results=100"' 
rel='nofollow'><span><data:label.name/></span></a>(<data:label.count/>)</li>&quot;);
        }
        </b:loop>
      </script>
    </ul>
 <b:include name='quickedit'/>
</b:includable>
</b:widget>

The code above will only show labels with more than two posts. To increase number of labels increase the number two in this code :

if (<data:label.count/> &gt; 2) {

Preview. Save Template. Clear Cache. View Blog.

In the screenshot at right you can see two label widgets.

The Modified Labels widget at the top shows only the top two most frequently applied labels. The Normal Labels widget at the bottom shows all the labels in the blog. If you have such a widget and lots of labels it can get terribly long making your blog stand on it's long sidebar!!

LIMIT NUMBER OF POSTS SHOWN FOR LABELS

When a label is clicked in the sidebar the default number of posts loaded is 20. You can also decrease this number by modifying the code show above. Take a look at these code lines within the above code :

<a expr:href='data:label.url +  "?max-results=100"' rel='nofollow'>

Change '100' in the above line to the number of posts you wish to load. Remember that if you select a higher number the page will take too long to load and you may lose traffic.

Happy Blogging!

New Widgets from Blogger in Draft.

Keep Widgets AND Change Layout Template.

How can I change the Layout template of my blog and keep my widgets? This is one question which occurs frequently to any blogger. As Blogger does not offer any three column templates at present or a template with large amount of customization, many are forced to load layouts from third parties.

Layout templates are different from Classic Templates which can be easily loaded without losing your widgets. If you want to change your Layout template you are forced to first backup widgets template data which otherwise would have been lost in the change. The other method is to change the template and then reload your widgets which takes time if you happen to have tons of widgets like mine. Here is a simpler method to keep widgets AND change the layout template..........

THE PROBLEM

Here is what happens when you get bored with the standard Blogspot templates :

1. You do a Google search for "XML Blogger Layout Template Free"

2. You find a site offering free Blogger Layouts.

3. You download the XML file to your PC.

4. You login at Blogger.com and click Layout link on Dashboard. Then you click on Edit Html subtab of Template tab.

5. Above the Template code box you click on Browse button to navigate to the XML template file on your PC. You select the file and click Open.

6. Then you click the Upload button to upload the selected file to Blogger.

WHAM! Blogger hits you with this warning message :

Widgets are about to be deleted :

Please confirm that the following
widgets should be deleted. All the widgets' configuration data will be lost.

Image1
LinkList1
Label1
Profile1

See picture below :

If you click the 'Confirm and Save' button the widgets will be lost unless you had them backed up. If you click the Cancel button the new layout template will not load.

So you land up between the devil and the deep blue sea and the process is aborted.

THE SOLUTION

1. IDENTIFY YOUR WIDGETS : First you have to identify your widgets code. In the Blogger Layout templates each Page Element is executed by widget code in the template. To see the widget code login at Blogger.com and click on Layout link on the Dashboard. Then click on Edit Html subtab of Template tab. DO NOT CLICK THE EXPAND WIDGETS TEMPLATE check box! Scroll down in Template code box :

The code for the widgets is in red. Each page element is represented by a single line of code in the unexpanded template like this :

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>

2. OPEN THE NEW LAYOUT TEMPLATE : Open the downloaded layout template (XML) file in Notepad. Identify the NON_WIDGET portion in the file. This is shown in black in the example Minima template file above.

3. COPY_PASTE THE NON_WIDGET CODE : Carefully select the NON-WIDGET code from the top of the template to the first widget code line in the new Layout template. Paste it instead of the same code in your Template box from the top of your template to the beginning of the first widget code line. Repeat the process for the rest of the NON-WIDGET code between the widgets and below the last widget code line in your template.

If you have done this carefully you will have replaced the whole template AROUND your widgets while keeping them intact.

4. PREVIEW BEFORE SAVING : The last step is to click the Preview button below the Template Code box. If you have done everything correctly your blog will open in a new window with the new layout template. Otherwise it will give you an error message. This is the advantage of Preview as it does not save the errors, if any, and gives you the opportunity of correcting them.

Put a Widget on a Specific Page or URL.

Increase Traffic | Create a Google Gadget.

Backup Widgets Template Data.

Add Language Translation Flags With Mouse Clicks.

Add Widget to provide Button-Link to your Blog.

You can now add a widget to your blog with a button which when clicked adds a button link to your blog from the reader's blog. This is done automatically without the reader having to type in even a line of code.....

First create a button by going to http://cooltext.com/Buttons and create a button for your blog. Then upload this button picture to a freehost like Googlepages and copy down the url of the picture. Let us call it : URL OF YOUR BUTTON PICTURE.

To do this go to Layout from the Dashboard after logging in to your account. In the Page Elements section click on Add Page Element link in the sidebar. In the new pop up window which opens choose Html/Javascript option. In the content section paste the following code :

<form action="http://beta.blogger.com/add-widget" method="POST">

<input value="FAVOURITE" name="widget.title" type="hidden"/>

<textarea style="display:none;" name="widget.content">

</textarea>
<input
value="http://buzz.blogger.com" name="infoUrl" type="hidden"/>

<input
value="http://www.blogger.com/img/icon_logo32.gif" name="logoUrl" type="hidden"/>

<input value="LINK TO THIS SITE" name="go" type="submit"/>
</form>
<p>Click above button to get a button link to this blog</p>

In the middle code replace the Capital letters with the appropriate values. Add all the above code in blue including the code in the middle picture. Click on picture to enlarge it. Then save the widget.

View blog. You will see below button in your sidebar:

When a reader clicks on this button he is taken to a page where he has to select his blog where he wants to add the link to your blog as shown below :

Here the reader can change the Title and edit the content if he/she wants. On clicking Add Page Element the link is added to the Page Elements tab in the sidebar of his blog. He/She can then rearrange its location in the blog by drag and drop method.

Using this method I have added it to my blog in the right sidebar at the bottom.

Technorati Tags:button, button-link, link widget, page element, widgets

How to Customize your Header?

To customize the header in a beta blog...........

start with BACKING UP YOUR TEMPLATE as described in How to Change Template.

The Blog Header in Beta blogs is described by two sections of code. The first section is in the CSS part of the template where the physical characteristics of the header are described. A sample header code in the CSS is given below :

/* Blog Header---------------------- */

#header-wrapper {
background:$titleBgColor url("http://www.blogblog.com/rounders3/corners_cap_top.gif") no-repeat
left top;
margin:22px 0 0 0;
padding:8px 0 0 0;
color:$titleTextColor;
}
#header {
background:url("http://www.blogblog.com/rounders3/corners_cap_bot.gif") no-repeat left bottom;
xxxxxxxxxxx
padding:0 15px 8px;
}
#header h1 {
margin:0;
padding:10px 30px 5px;
line-height:1.2em;
font: $pageTitleFont;
}
#header a,
#header a:visited {
text-decoration:none;
color: $titleTextColor;
}
#header .description {
margin:0;
padding:5px 30px 10px;
line-height:1.5em;
font: $descriptionFont;
}

As you can see all the physical characteristics of the header such as background, margin, padding, textcolor etc.are described here. Also the header heading is described in h1 and the description is described in #header .description. The behaviour of the header link is described in #header a and #header a:visited.

To customize the physical characteristics of the header you will have to modify the above code. For example to increase the width of the header you will have to add "width:750px;" line in the line signified by xxxxxxx. To increase its height add the line "height:100px;" in the same position. To customize somemore features add the following lines in the same place :

padding:0 15px 8px;
background-color:#003333;
border:solid thick ;
height:125px;
width:725px;
margin:10px 0 0 0;

Margin and Padding are described in clockwise order and the former is the space outside while the latter is the space inside the element. Background color is described here using hex number. A useful utility for determining the hex number of a color is the color picker from Iconico.com. NOTICE that all the lines end with a semicolon.

In the above code you will also see some properties described using variables like $descriptionFont, $titleTextColor, $pageTitleFont etc. These are the variables passed on to the top section under Variable Definitions and are responsible for executing the 'Fonts and Colors' page under the Template section. They enable customizing the template in a WYSIWYG or Graphical interface for the point-and-click user.

The second section of code is what executes the header on the web page and exists in the body. A sample headercode is given below. The header in beta blogs consists of single or multiple widgets which are contained within a header section which in turn is contained within a header-wrapper.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>

The code "maxwidgets='3'" shows how many widgets are contained within the header. If you do not have this part in the second line of your header you will have to add it before adding anything like a picture or a banner-link to the header. After this is "showaddelement='yes'". You will have to add this so that your header will have an 'Add Page Element' link in the Page Elements section. After adding this save the template and switch to Page Elements view to see the link in action in the header.

You can now add as many widgets as you have specified under 'maxwidgets' to the header by going to Page Element view and clicking on Add Page Element. You can add a Banner Link, a Banner, Adsense and any other advertisements, Animated banners, Flickr Fonts, Logos or if you wish do away with the header completely. Creativity beckons you and you play with the muses.

To add Flickr Fonts go to here. Create the header and upload it to a free host like Googlepages. Click on Add Page Element link in header and choose picture element. In the popup window paste the url of the picture at Google pages and save. See below.

For animated banners try here : http://www.animationonline.com/S/display_templates.html
http://www.gifanimations.com
http://www.gifs.net/

For BLOG HEADERS see :
http://www.headerbar.com/templates/

For CUSTOMIZED BANNERS see :
http://www.customsigngenerator.com/

To add a horizontal menubar see :
http://beautifulbeta.blogspot.com/2006/10/adding-menubar-to-your-blog.html

To Randomise header graphic with Javascript see :
http://nofancyname.blogspot.com/2005/11/using-javascript-to-randomize-things.html

To Add a rotating picture to the header see :
http://freeyasoul.blogspot.com/2006/10/random-rotating-banner-hack.html

To make a Header with Title in the middle and two images at the side use a table structure as follows :

<table width="740" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="URL OF PICTURE FILE" width="128" height="120" align="left" /></td>
<td><div align="center">
<h1><strong>Beta Blogger for Dummies</strong></h1>
</div></td>
<td><img src="URL OF PICTURE FILE" width="128" height="120" align="right" /></td>
</tr>
</table>

Add this code to a Html/Javascript element obtained after clicking Add Page Element link in the header in Layouts section. See the result below :

Another hack for doing this is at :
http://beta-templatetesting.blogspot.com/2006/11/3-colum-header.html

CREATE YOUR OWN BLOG HEADER GRAPHIC See :
http://paulstamatiou.com/2005/11/06/how-to-make-a-blog-header-graphic/