Blogger: Filling Wasted Header Space

New Blogger supplied templates waste a lot of space in the header. By default they provide a locked header widget with a Title and Description. Unfortunately, this leaves a lot of screen real estate blank which could be put to better use. One common request I see is to place a second column where the site designer can place another widget. Here's how to do it.

Open up the blog template in Design -> Edit HTML mode and save a copy of your template with the Download Full Template link, this will let you back track if something goes wrong. Next, make sure the Expand Widget Templates box is Not Checked. Now search for <div class='region-inner header-inner'>. Below should be section that looks like this:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='false' title='Your Blog Title (Header)' type='Header'/>
</b:section>

That code is responsible for the header section in Design->Layout. Let's add another section along side to fill the wasted space. First, replace the code above from <b:section through </b:section> with this:

 <div class='header-column-left'>
  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='false' title='Your Blog Title (Header)' type='Header'/>
  </b:section>
 </div>
 <div class='header-column-right'>
   <b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'>
    </b:section>
 </div>
 <div class='clear'/>

The above places two sections in the header, but they need styles to sit side by side instead of stacking. Search the template html for  /* Header and place the following lines after the ---- */.

.header-column-left {  float: left; width: 50%;}
.header-column-right {  float: right; width: 40%;}

Now, we need to finish by making the template work properly in Page Elements. Search for </b:template-skin> and insert these styles two lines above:

#layout .header-column-left {float: left;width: 50%; }
#layout .header-column-right {float: right;width: 40%; }

Preview the changes and make sure everything looks ok. If the preview looks totally wrong, Clear Edits and start over. Otherwise, Save Template and switch to Design->Page Elements. The template should now have a box in the upper right waiting for content to fill that empty space.

Further Customization
It's pretty easy to add a new content section into a header, however depending on the template some things may look a little different. Also, this is a very generic solution and may require tweaking depending on the design. This site for instance uses custom column widths and backgrounds. In future updates I'll talk further about header customization, so check back regularly for more.

Support JSBlogStop:

Donate with Dwolla