Atenção: Este tutorial aplica-se aos Modelos de Layout (lançados em 2006). Se você procura o mesmo tutorial para os novos modelos (Designer do Modelo - 2010) leia este tutorial.
Atendendo pedidos, vou explicar como dividir o cabeçalho do blog para que possa acomodar outro widget ao lado do título e abaixo do mesmo. Lembrando que todos os tutoriais aqui publicados usam o template Mínima do Blogger como base; templates já modificados podem não apresentar o resultado esperado.
Este é o método que eu uso, vocês podem encontrar outros tutoriais que expliquem de maneira diferente, ok?
Primeiro vamos entender o cabeçalho original, no HTML:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Header Dividido TNB (Cabeçalho)' type='Header'/>
</b:section>
</div>
Perceba que existe uma
Div (bloco) no alto da página de nome (
ID)
'header-wrapper' que recebe um widget de nome
Header1 dentro de uma seção
header.
Header1 é um widget como qualquer outro elemento que você adiciona em sua sidebar por exemplo, e que não se perde a cada troca de template por que está trancado (
locked='true'). O que precisamos fazer é estabelecer que a seção
header não ocupe a área total de
header-wrapper para dar espaço a uma nova seção. Faremos isso no CSS. Procure por:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Neste trecho do CSS está contido o estilo para toda div
header-wrapper. Veja que a largura total desta div é de
660px. Você pode aumentar esta largura (não sem antes aumentar a largura de
Outer-Wrapper, que é a Div maior que engloba todas as outras). O que vou fazer primeiramente é estabelecer que Outer-wrapper tenha
990px de largura:
#outer-wrapper {
width: 990px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Feito isso, aumento a largura de
header-wrapper para
980px de largura:
#header-wrapper {
width:980px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Agora que a Div
header-wrapper está apta para conter duas seções, vou dar uma largura para
header e determinar que flutue à esquerda (para que a nova seção se apresente à direita do título do blog):
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: left;
float:left;
width:40%;
color:$pagetitlecolor;
}
Em seguida crio uma nova seção que ocupará o lado direito de
header-wrapper e que receberá o novo widget; vou chamá-la de
#header-right:
#header-right{
margin: 5px;
border: 1px solid $bordercolor;
text-align: left;
float:right;
width:56%;
color:$pagetitlecolor;
}
Bom, sabemos que apenas com CSS não se cria nada, ele serve apenas para dar estilo, portanto iremos criar a nova seção no HTML:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Header Dividido TNB (Cabeçalho)' type='Header'/>
</b:section>
<b:section class='header-right' id='header-right' maxwidgets='1' showaddelement='yes'/>
</div>
Pronto, já temos o nosso cabeçalho dividido em dois. Salve e vá até a página
Layout, deve ficar assim:
Se você deseja que a nova seção possa receber mais de um widget, basta apagar o trecho
maxwidgets='1' ou aumentar o número de
1 para quantos widgets deseja que ele receba.
Mas Ariane, eu quero colocar um widget ao lado do título e um baixo, ocupando todo o espaço do header-wrapper, tem como? Tem sim. Novamente vamos criar uma nova seção que chamaremos
#header-bottom. Vamos estabelecer primeiro o estilo e depois acrescentamos o código HTML:
#header-bottom {
width:100%; /*veja que a largura é total*/
margin:0 auto 0px; /*não há flutuação, está alinhado ao centro*/
}
e no HTML:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Header Dividido TNB (Cabeçalho)' type='Header'/>
</b:section>
<b:section class='header-right' id='header-right' maxwidgets='1' showaddelement='yes'/>
<div style='clear:both'/>
<b:section class='header-bottom' id='header-bottom' maxwidgets='1' showaddelement='yes'/>
</div>
A linha
<div style='clear:both'/> abaixo das duas primeiras seções serve para 'empurrar' a nova seção (header-bottom) para baixo, caso contrário ela ficaria acima das outras e bagunçaria todo o layout. Salve e veja como deve ficar na página Layout:
E então eu fiquei muito feliz de conseguir dividir meu cabeçalho e coloquei lá um banner do Adsense de 468x60 na seção da direita e um de 790x90 na seção de baixo e ficou assim:
Aff Ariane, ficou feinho...não tem como deixar o banner alinhado no centro? Tem, claro que sim. O que fizemos até agora foi dar estilo para as seções que recebem os novos widgets, mas não determinamos como os widgets devem se comportar dentro destas seções, certo?
Vou então determinar que o widget que ocupa a seção
#header-bottom apareça alinhado ao centro, com um espaçamento para o topo de 5px:
#header-bottom .widget{text-align:center; padding-top:5px;}
Acrescento ainda uma cor no background de #header e obtenho este resultado:
Melhorou um pouco, não? Claro que estou apenas usando um exemplo bem básico para que você tenha uma noção, depois é com a criatividade de cada um. Você também pode centralizar o widget que ocupa a seção
#header-right, da seguinte maneira:
#header-right .width{text-align:center} /*o banner ocupará o centro da seção*/
Supondo que você queira colocar em
#header-bottom uma lista de links (ou marcadores) para que se apresente como um menu horizontal, acrescente no CSS:
#header-bottom ul{
margin: 0 0 0;
padding: 0 0 0;}
#header-bottom li{
float:left;
list-style-type:none;
}
#header-bottom li a{
display:block;
padding:0 20px; /*espaçamento entre os títulos*/
font-size:0.9em; /*tamanho da fonte*/
font-weight:normal;
text-decoration:none;
color: #000000; /*cor do link*/
}
#header-bottom a:hover{
color:#000000; /*cor do link no quando passa o mouse sobre*/
text-decoration:none;}
O resultado é este (acrescentei também uma borda em
#header-wrapper e um background em
#header-bottom valor #ccc):
É isso ;)
