Dividir Header em 2 colunas no Designer de modelo

Pensando nos usuários que utilizam estes modelos novos de templates e se deparam com a dificuldade de dividir a header do blog, eu andei fazendo alguns testes a fim de desvendar um pouco mais os códigos destes templates novos e descobri uma maneira de dividir o Header em 2 colunas, nos templates designers de modelo.
É uma ótima opção, para quem quer incluir um banner do adsense ao lado do cabeçalho, por exemplo, ou até mesmo, uma caixa de busca.
Hoje vou mostrar como dividir o Header em 2 colunas nos templates Designer de modelo.

A primeira coisa a fazer, é um backup do seu template para evitar transtornos, caso algo saia errado.

1º passo:

Ajuste o tamanho da fonte do seu cabeçalho.
Entre na aba “designer de modelo” e clique no modo “avançado“.
Clique em “titulo do blog” e ajuste para um valor menor (20,24 ou 30px, depende do modelo que você estiver usando).

2º passo:

Procure por:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

onde está maxwidgets=’1‘- troque por maxwidgets=’5‘.
onde está showaddelement=’no‘ – troque por showaddelement=’yes‘.

Agora na linha logo abaixo do trecho que você acabou de localizar, procure por:

Header1' locked='true

Onde está escrito true – troque por false.

3º passo:

Agora arraste o gadget do cabeçalho, deslocando-o para outro lugar, como a sidebar ou o footer, por exemplo, para que possamos trabalhar na inclusão das colunas.

4º passo:

Volte no modo “editar html” e procure por:

<div class='header-outer'>

Substitua por:

<div class='header-outer'>
<div id='header-left' style='width:50%; float: left; margin:0; '>
<b:section class='header-left' id='header-left' preferred='yes' style='float:left;'/>
</div> 

<div id='header-right' style='width:50%; float: right; margin:0; '>
<b:section class='header-right' id='header-right' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>

Salve!
Entre na aba “elementos de página“.
Notem que acima do gadget “Páginas” apareceu uma coluna, precisamos retirá-la dali para evitar que desconfigure o cabeçalho.
Precisamos localizar novamente aquele código do 2º passo, só que desta vez faremos o inverso.

5º passo:

Procure por:

<b:section class='header' id='header' maxwidgets='5' showaddelement='yes'/>

onde está maxwidgets=’5‘- troque por maxwidgets=’1‘.
onde está showaddelement=’yes‘ – troque por showaddelement=’no‘

Salve!
Volte na aba “elementos de página” e veja se a coluna foi excluída, devendo ficar assim:

Aplicando estilos às colunas:

Agora se desejar você pode aplicar estilos ás colunas do header que acabou de dividir.
Volte na “edição HTML” do seu template e procure pelo trecho CSS referente ao header.
Tente localizar por:

/* Header

e cole logo ABAIXO deste trecho, o código CSS para aplicar estilos:

#header-right{
margin: auto;
padding: auto;
}
#header-left{
margin: auto;
padding: auto;
}

Defina os estilos de acordo com os elementos que você adicionar às colunas (feed, caixa de busca, menu, banner, etc).
Se quiser, arraste o gadget Cabeçalho do blog para o Header, posicionando-o em uma das colunas que você dividiu.

Caso queira diminuir a largura de alguma das colunas, ajuste o valor de “width:50%” do código constante no 4º passo.
Lembrando que você deverá sempre somar os valores tomando cuidado para não ultrapassar o limite de largura total.

Dica: Você pode, por exemplo, estipular “width:70%” para a “header-left”, e “width:30%” para a coluna header-right.
Ajuste da maneira que você preferir.

Veja o resultado:

Lembrando que eu testei este método em todos os modelos disponíveis no Designer de modelo e todos deram certo!

E para chegar a este resultado, eu fiz vários testes a fim de desvendar um pouco mais os códigos destes templates novos.
Se não der certo com você, com certeza é porque você deve ter feito algo errado, ou já houve alguma modificação nesta área do seu template, portanto refaça o tutorial, teste e: mãos á obra!