Eu já publiquei um artigo onde eu ensino a Dividir Header em colunas, só que aquele tutorial não se aplica aos templates novos do Blogger, o Designer de modelo.
Estes novo templates do Blogger tem a opção de dividir as colunas da sidebar e footer diretamente pelo painel do blogger, sem a necessidade de inserção de códigos, porém, não tem a opção de dividirmos o Header (cabeçalho) em colunas.
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:

Leia também:

• Bordas no Template
• Alterar icone do autor do comentário
• Marcadores com Nuvem de Tags em Flash
• Descrição Rotativa abaixo do Cabeçalho
• Desmembrando a Área de Comentários

Vanessa

Vanessa é blogueira desde 2009, e 'aspirante' a web design nas horas vagas. Autodidata, viciada em internet, adoradora de blogs, seus códigos e templates, apaixonada por programas gráficos, tecnologia e web design,e fascinada pelo estilo gótico. Leia Mais sobre a autora »

Vanessa já escreveu 341 posts.