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.