sábado, 13 de novembro de 2010

Como dividir o cabeçalho do blog em duas partes





Neste procedimento, conservamos a header do nosso blog e ao mesmo tempo deixamos um espaço à esquerda do cabeçalho para colocar um gadget qualquer.

Primeiramente procuramos pela header (Design> Editar Html):

/* Header
----------------------------------------------- */


Abaixo colocamos :


.header {width:50%;
float: left;
margin:0 auto 2% ;
}
.header2 {width:50%;
float: right;
margin:0 auto 2%;
}


Agora temos que procurar esta parte:

<div class="region-inner header-inner">
<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:widget>
</b:section>


Adicionamos à ela esta parte em negrito:

<div class="region-inner header-inner">
<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>
<b:section class="header2" id="header2" showaddelement="yes">
<div style="clear: both;">
</div>

Salvamos. Ao visualizar o Design, teremos o cabeçalho dividido em duas partes:




Quando adicionarmos um gadget ao lado da header, veremos que o título do blog ficará muito grande, para diminuí-lo vá em Design > Design de modelo> Avançado > Título do blog e diminua "px", como mostrado abaixo:







Isto acontece porque as duas partes do cabeçalho possuem proporções iguais. Para deixar uma maior que a outra, trocamos o valor width:50%  do primeiro passo, tendo em conta as proporções, se colocarmos na header uma porcentagem maior, temos que diminuir na header 2, a mesma porcentagem que foi acionada  na header e vice-versa.


5 comentários:

Fabricio Santana disse...

meu cabeçalho dividiu sim,porém só p/ o lado direito.
me ajude por favor!
http://cantorfabriciosantana.blogspot.com/

Marcelo disse...

Oi Fabrício, não ficou como no exemplo acima?

Abrç.

João disse...

Opa Tudo Bom? Não sei se tem mais no meu apareceu um errinho, diz que não pode colocar só <div

Marcelo disse...

Oi João, vc está colocando só o ultimo codigo?

Abrç.

Blogger disse...

Achei

Artigos Relacionados

Related Posts Plugin for WordPress, Blogger...