Dividir Cabeçalho do Blogger em Dois – Design do Modelo

Como fazer duas colunas no cabeçalho do blog pode ser bem útil para tornar seu Blog mais interessante e aproveitar melhor o espaço da sua pagina. Veja abaixo como fazer...

Lembrando que antes de fazer qualquer alteração, é recomentado fazer uma cópia do seu template (Backup), caso algo saia errado você poderá restaura-lo como esta antes.

1ª Passo

Para fazer essa alteração entre na pagina EDITAR HTML, mas antes de começar faça um backup do seu blog (salvar uma cópia do template), assim não perderá nada caso ocorra algum erro nas edições de HTML. Depois disso procure por:

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

No trecho: maxwidgets='1' você deve mudar o numero 1 para 5 ou qualquer outra quantidade de gadgets que pretenda usar, ou simplesmente apagar esses códigos, assim o blogger não limitará o numero de gadgets neste setor.

Também troque a palavra 'no' por 'yes' neste trecho: showaddelement='no', isso faz mostrar o adicionar gadget.

Outra parte do HTML que precisamos mudar é Header1' locked='true' , trocando true por false, isso permitirá mudar o cabeçalho de lugar e arrastá-lo para dentro das colunas que vamos criar no cabeçalho do blog.

2ª Passo

Agora encontre <div class='header-outer'>, apague e coloque esse código no lugar:

Para dividir em dois

<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;'/>

Para dividir em três

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

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

Os valores width:50% são as larguras de cada coluna, você pode alterar como desejar, mas o quanto aumentar em uma deverá tirar da outra ou seja em vez de usar 50 e 50 pode usar 60 e 40.