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:
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:
- Use an add-on called MeasureIt. If you're using Firefox for this tutorial, I suggest you get this add-on.
- You can use FireBug to see the width of the surrounding elements and then estimate the width of your unused space.
- 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.
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 and delete these lines:
Original code in place before deletion:
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 and delete these lines:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>Note: The 'title' attribute in this line will be different in your template. Don't worry about it, just delete these lines.
<b:widget id='Header1' locked='true' title='Header' type='Header'/>
</b:section>
Original code in place before deletion:
Step 3:
Paste these modified lines in place of the deleted lines:
Modified code in place:
Paste these modified lines in place of the deleted lines:
<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.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Header' type='Header'/>
</b:section></td>
<td style="width: 310px;">
<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>
</td></tr></table>
Modified code in place:
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!
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!
Category Article Tutorial
