05 novembro 2009

Dividir o cabeçalho do blogger em duas partes




Nosso Cabeçalho do nosso blog é divido em duas partes, uma vai nossa logo e na outra parte um tradudor,mas você pode colocar o que quiser dentro desse espaço.
Então vamos ao que enteressa:





Primeiro de tudo salve sempre seu template, antes de qualquer alteração.
Vá até Layout, e em seguida editar HTML (não a necessidade de expandir página)
Aperte control F, abrirá a caixa de busca, 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>

Depois 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;

Esta pronto, abraços.




0 comentários:

Postar um comentário

 

Assine Nosso Feeds!

Seguidores