Saiba Como:..."Como dividir o cabe√ßalho do Blogger" - #Mensagens Diversificadas |MD|ūüíĆ

#Mensagens Diversificadas |MD|ūüíĆ

MD . Mensagens Diversificadas.

Home Top Ad

Pesquisar

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:












Nenhum coment√°rio:

Postar um coment√°rio


Mensagem do formul√°rio de coment√°rio:

Postagem em destaque

Releitura: Pantufas/Chinelos de crochê para adultos, tutorial / receita, veja detalhes +

https://www.youtube.com/watch?v=LtdPAys9xtM LEITORES...SEJA +1 V√ćDEOS APARE√áA NAS B...

mensagens

Post Top Ad