Utilising Unused Space in Blogger Header

This is an interesting question from a Blog reader - Jamie. Jamie wants to know if there is way to utilize the unused space in Blogger header. The answer is yes. When you use an image in your header, your image will be aligned to the left. Some of you would want the image to be centered and you'd settle for that. But if you want your image to stay where it is (left), and add a gadget at the unused space on the right side, wouldn't that be cool?

Step 1:

When you go to Page Elements/Layout, you will see boxes where you can 'Add a Gadget'. Those are sections (not technically, but for the sake of simplicity, just assume it is). You can generally split a section, but splitting in two is not the aim of this tutorial, as your header will be half the width of your entire header. That's not what we want.

We want the header to be intact. So, we need to measure the width of the unused space. You can use various methods to measure the width of your unused space:

1. Use an add-on called MeasureIt. If you're using Firefox for this tutorial, I suggest you get this add-on.
2. You can use FireBug to see the width of the surrounding elements and then estimate the width of your unused space.
3. Trial and error. Use a value, preview and see if it's fine. Then use another one, and keep doing it till you're satisfied with the results.

I used MeasureIt as it's the easiest way to find this width. The width of my unused space is 310px:

Step 2:

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -

If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed -

Find for these lines:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
        <b:widget id='Header1' locked='true' title='Test Blog 18 (Header)' type='Header'>
 <b:includable id='main'>…</b:includable>
 <b:includable id='description'>…</b:includable>
 <b:includable id='title'>…</b:includable>
        </b:widget>
      </b:section>

Note: The 'title' attribute in this line will be different in your template. Don't worry about it, just delete these lines.

Step 3:

Paste the following line directly above the lines found in Step 2:

<table><tr><td>

You have to insert the width of your unused space in line 5 above. Change 310px to the value that you've gotten in Step 1. Click on Save Template once you're done.

And then, insert the following line directly below the lines found in Step 2:

</td>
<td style="width: 310px;">
<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>
</td></tr></table>

You have to insert the width of your unused space in line 2 above. Change 310px to the value that you've gotten in Step 1. Click on Save Template once you're done.

This is what the final code should look like after the two additions above:

<table><tr><td>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
        <b:widget id='Header1' locked='true' title='Test Blog 18 (Header)' type='Header'>
 <b:includable id='main'>…</b:includable>
 <b:includable id='description'>…</b:includable>
 <b:includable id='title'>…</b:includable>
        </b:widget>
      </b:section>
</td>
<td style="width: 310px;">
<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>
</td></tr></table>

Step 4:

Go to Dashboard - Design - Page Elements (or Dashboard - Layout) and a brand new section will be waiting for you there. Add your gadget there as you wish.

I thought my previous post will be the last post of the year. But I was wrong. So, again, have a blasting new year! Happy 2011!