Dividir o Header "cabeçalho" em duas partes

Dividir o Header "cabeçalho" como o da figura abaixo.

 

Obs: Antes de editar o modelo, é recomendável salvar uma cópia do mesmo. Baixar modelo completo

Esse procedimento é simples, mas leia essa explicação até o final antes de começar, pois será necessário fazer algumas alterações no código antes de colocar no seu blog, entre na pagina editar html e procure por:

<div id='header-wrapper'>
<b:section class='header' id='header' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Frases Curtas (Cabeçalho)' type='Header'/>
<b:widget id='HTML7' locked='false' title='' type='HTML'/>
</b:section>
</div>

Substitua por:

<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:widget id='Header1' locked='true' title='Frases Curtas (Cabeçalho)' type='Header'/>
</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:widget id='HTML7' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div style='clear:both;'/>
<div id='header-bottom'>
<b:section class='header' id='header-column-bottom' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>
</div></div>

Você pode notar que a parte onde está a linha é a parte mais larga do cabeçalho(74%) e a outra na segunda parte que tem 25%, então coloque que estão neste trecho no seu blog como desejar e depois será fácil mudá-las de lugar pela pagina layout somente arrastando como qualquer outro gadget.

Para alterar as larguras ou lado das colunas do cabeçalho é só modificar essas partes do código:

width: 25%; float: right;
width: 74%; float: left;

Você notou que a soma dos valores não chega a 100% isso é para evitar que em alguns navegadores uma coluna fique embaixo da outra devido à falta de espaço. E para trocar as colunas de lado só precisa mudar de lugar as palavras left e right nos códigos. Espero que essa dica seja muito útil e ajude a melhorar o visual do blog.

Caso o seu código seja diferente do tutorial acima, teste esse próximo tutorial.


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> 

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

Após ter substituido os códigos clique em "Salva Modelo"

Agora clique em "Elementos da Página" e confira o resultado.