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.


4 comentários:

Anônimo disse...

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

Priscila disse...

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

Abrç.

Priscila disse...

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

Abrç.

Blogger disse...

Achei

Artigos Relacionados

Related Posts Plugin for WordPress, Blogger...