" Como dividir o cabeƧalho do Blogger"
..." como dividir o cabeƧalho do blog para que possa acomodar outro widget ao lado do tĆtulo e abaixo do mesmo. "" Lembrando que..."
...os tutoriais "...
..." usam o template MĆnima do Blogger como base; templates jĆ” modificados podem nĆ£o apresentar o resultado esperado."
..." Primeiro ..."
..." 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. "
"...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). "
" ...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,
..."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%;
float:right;
width:56%;
color:$pagetitlecolor;
}
..." 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):"
<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'/>
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*/
}
text-decoration:none;}
" O resultado Ć© este"...
..." foi acrescentada tambƩm , por Ariane,
uma borda em #header-wrapper
e
um background em #header-bottom valor #ccc):"
fonte e crƩditos:
0 ComentƔrios
Mensagem do formulƔrio de comentƔrio: