DIVIDIR CABEÇALHO

FONTE: método muito melhor explicado no Blog a la carte.


PASSO ÚNICO:
1) Substituir o seguinte trecho (ou semelhante)
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TÍTULO DO BLOG (Cabeçalho)' type='Header'/>
</b:section>
</div>

por:
<!-- código que divide o cabeçalho -->
<div id='header-wrapper'>
<div id='header-column-container'>
<div id='header2' style='width: 74%; float: left; margin:0; '>
<b:section class='header-column' id='header-column-left' preferred='yes' style='float:left;'>
</b:section>
</div>

<div id='header3' style='width: 25%; float: right; margin:0; '>
<b:section class='header-column' id='header-column-right' preferred='yes' style='float:right;'>
</b:section>
</div>

<div style='clear:both;'/>

<div id='header-bottom' style='padding: 10px; '>
<b:section class='header' id='header-column-bottom' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>
</div></div>
<!-- fim do código -->


Obs: editar as porcentagens em vermelho de acordo com as larguras da coluna do post (main) e da barra lateral (sidebar); a soma deve ser menor que 100% para evitar "encavalamento" das margens.


--> voltar para o índice geral


5 comentários:

Unknown disse...

Muito bom seu blog, parabéns!!!

Usuário Black Power disse...

Muito bom amigo, mas esqueceu de falra, você deve destravar o cabeçalho e move-lo para outro lugar se não perdera :D

Marcia Bispo disse...

adorei, direto e reto, sem mimimi. Resolvi meu problema. Agora uma pergunta, tem como dividir o rodape do layout tambem? Seria o mesmo codigo trocando o header por footer?
Agradeço desde já

Claudemir disse...

Muito obrigado pela dica. Aqui funfou de primeira....

Obrigado e sucesso.

marcos humberto disse...

amigo preciso de sua ajuda, gostaria de fazer isso em meu blog mais não estou conseguindo ...