Dividir o Header (Cabeçalho) - Para novos Templates

Este tutorial se aplica aos novos modelos de template (Designer do Modelo)
Para dividir o cabeçalho (header) nos novos modelos de template:

1- procure pelo seguinte trecho de código, no template (Editar HTML):

<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Novo Design Blogger (Cabeçalho)' type='Header'/>
</b:section>
</div>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div></header>

2- Substitua tudo por:

<div class='fauxborder-left header-fauxborder-left'>
<div class='region-inner header-inner' style='width:49%; float:left'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Designer do Modelo (Cabeçalho)' type='Header'/>
</b:section></div>

<div class='fauxborder-right header-fauxborder-right' style='width:49%;float:right;height: auto;'>
<b:section class='banner' id='banner' maxwidgets='1' showaddelement='yes'>
</b:section>

</div>
</div>

<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</header><div style='clear:both;'/>

3- Salve a modificação e veja em Elementos de Página, como deve ficar o cabeçalho já dividido:

4- Dependendo da largura do layout (eu usei 990px) será preciso fazer ajustes na posição do banner. Para isso, vá em Designer do Modelo -> Avançado e em Adicionar CSS coloque o seguinte código:

#banner{margin: 20px 20px 0px 0px;}

Vá alterando os valores de margin até que o banner ocupe a posição desejada.

Meu modelo, antes e depois da alteração:

Antes

Depois

Fonte: Templatenovoblog