3 colum Header

Many would like to have header with compund attributes.The header you see here has single picture in the background with 3 colums.The middle colum has the Blog Title and description the right-colum has a clock and i have left the left-colum empty.

PHASE: 1

1. Look for
   &ltb:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=‘no’>
2. delete–maxwidget=’1′
3. change–showaddelement=’yes’
4. save
5. Your final line of code should look like this
   &ltb:section class=’header’ id=’header’ showaddelement=’yes’>

PHASE:2

1. Template—Page Elements
2. You must be able to see the “Add Page elements” in the header section
3. Delete the Existing header
4. Add new page HTML-JavaScript element
5. Copy paste the code into a Notepad and make required URL changes

<table border=”0″ width=”100%”><tr><td width=”760px” background=”URL_OF THE HEADER PICTURE” height=”150px”><table border=”0″ width=”100%”><tr><td width=”20%”>ANY JSCRIPT OBJECT /TEXT ANYTHING ELSE OF YOUR CHOICE</td><td width=”60%”><table border=”0″><tr><td><h1 align=”left”>&lta href=”YOUR BLOG URL”>&ltspan style=”color:white; text-decoration:none;text-underline:none”>YOUR BLOG TITLE</span></a></h1></td></tr><tr><td><br /><span style=”font-size:21.0pt; color:white”>YOUR BLOG DESCRIPTION</span><br /></td></tr></table></td><td width=”20%”>ANY JSCRIPT OBJECT/TEXT ANYTHING ELSE OF YOUR CHOICE</td></tr></table></td></tr></table>

6. After making the changes Copy paste the code to the HTML-Javascript widjet that you just added in the header section
7. Save and view your blog

PHASE:-3 Addendum Thanks to jsanchirico
You may change the following to suit your template color-schema

1. This uses the “Table within a table” kind of logic

Table 1—— has one Row and one colum
|   First row of this table has the picture
|
|___Table 2 is inserted into the row1 of table 1
| |______Table 2 has 1-row and 3-colums
|
Now the title is written inside the 2nd colum of the table 2
I have left the 1st colum blank and insert a JScript code for clock in 3rd colum

2. So feel free to come up with your own version
3. &width=”760px” background=”URL_OF THE HEADER PICTURE” height=”150px Just change the height of you find your header to be too large
4. Sometime the larger font size will also affect the header height.In such case make required alterations herespan style=”font-size:21.0pt; color:white” YOUR BLOG DESCRIPTION
5. If your header stylesheet has a bacground image..just delete it

As for Example:-

#header {
background-color: #A9B5BF;
background-image: url(http://nea.ngi.it/templates/img/33-onde.jpg);
background-position: top;
background-repeat: no-repeat;
border-style: solid;
border-width: 1px;
border-color: #375267;
height: 150px;
margin-bottom: 5px;
}

IF you liked this feature do let me know. It will make me happy.If you face any difficulty do drop a comment, i shall respond at the earliest.
And..dont forget to include me in your credits section