Saiba Como:..."Como dividir o cabeƧalho do Blogger"

Saiba Como:..."Como dividir o cabeƧalho do Blogger"

 

"  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%;
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'/>

</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*/
}


text-decoration:none;}

"  O resultado Ć© este"...

..."   foi acrescentada tambĆ©m , por Ariane,
 uma borda em #header-wrapper  

um background em #header-bottom  valor #ccc):"




fonte e crƩditos:












Postar um comentƔrio

0 ComentƔrios