Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

23 outubro 2009

Como dividir o cabeçalho do Blogger

 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 ;)

Artigos Relacionados

29 comentários:

Copyright disse...

Opa, dica muito útil.
Já está anotada!
Obrigado por compartilhar. :)

Saúde com Ciência disse...

Até que enfim...só vc mesmo Ariane, muitoooooooo obrigada!!!

Anônimo disse...

Ariane, Ariane... =)

(((( SHOW ))))

=;b

.::.Susy.::.

Wicca disse...

Você e 10!

Parabens! Já sou visitante assiduo no teu blog! Obrigado por dispor do seu tempo para nos ajudar!

Atanaildo disse...

vlw msm Ariane muito boa a dica, bom se poder da uma passada no meu blog e olha o template q eu fiz seguindo algumas das suas dicas vlw msm.Muito Sucesso Para Vc bjss

Shirley disse...

Ariane, será que preciso dizer como ficou bom esse tutorial?? Eu já vinha tentando há algum tempo fazer isso, o povo dava a "dica" de fazer "uma tabela a 100%", mas ninguém nunca me perguntou se eu SEI fazer uma tabela em html, muito menos considerando percentual fulnao ou sicrano - e eu não sei, claro! rs. Bom, eu fiz, deu certinho no texte, ficou bonitinho. Agora só falta coragem pra mudar o template pro blog... rs :-S. De qualquer maneira, só pra vc saber que sem vc eu não seria NADA nesse mundo htemelítico! rs :-P Bjão!

Shirley disse...

Ariane, eu faleicedo demais: hj instalei meu template "novo", mas meu widget do cabeçalho (um banner de 728x90) não ficou centralizado, mesmo eu tendo feito tudo o que vc ensinou... Será que tem outra solução? :-(

Ariane disse...

Shirley o que eu vi no seu blog é que o banner maior está dentro de uma div "header-bottom2" mas não há estilo para esta div, apenas para o widget de #header-bottom" o que não é suficiente. Tem que ter exatamente o mesmo nome da div.

Shirley disse...

Ariane, eu entendi, fui lá no texte e atribui um estilo centralizado ao buttom2, e funcionou, o banner centralizou. mas qdo joguei as tags pro blog mesmo não funcionou. tvz seja problema com o código do banner, que não é do google, né? enfim! bjão, e obrigada pela atenção! ;-)

Ariane disse...

Shirley mas eu não vi nenhuma mudança no código, onde você alterou? o seu está assim:

#header-bottom .widget{text-align:center; padding-top:5px;}

mas tem que ficar assim:

#header-bottom2 .widget{text-align:center; padding-top:5px;}

a div que você criou é #header-bottom2 e no css tem que ter exatamente o mesmo nome.

Vera Moura disse...

Ariane, podia-me dizer como posso abrir um link do meu blog numa nova janela. Encontrei nos tutoriais como fazer para todos, mas eu só queria para um ou dois. Muito obrigado.
meu e-mail: vera.vamp@gmail.com

Ariane disse...

Vera faz assim:

<a href='url aqui' target="_blank">Link</a>

Alisson Costa disse...

Seguir as instruções mais não deu certo :/
Em vez de ficar do Lado ficava debaixo, Me Ajuda Ariane?

Çγвэя Đǿώήş disse...

Olá ariane !

Achei super Genial sua ideia de fazer esses tutoriais

para ensinnar akelle ke kerem ter um blogger de "verdade"

Tenho uma duvida Eu colokei tudu oke voc disse mais nakella parte q vooc mando colocar no html depois de fazer a
#header-right
elle diz q o id header já existe ! e q os id tem q ser unicos un negoço +/- assin !
Me Ajude Pf !
Gefferson!

Anônimo disse...

Eu consegui !!
Arianee eu te amo, hehe, clama é brincadeira!
Mais muito obrigado mesmo!
Eu consegui colocar o Widget no header. Agora posso colocar um anúncio 798x90 :) *--*

Muito obrigado mesmo!

Atenciosamente,

Wilamis Rogério
Ainda Não Achou?

Anônimo disse...

gostei muito dessa dica vou ver se fica bom no meu blog
obrigado

Samuel Lins disse...

Çγвэя Đǿώήş

comigo aconteceu a mesma coisa
procura isso no HTML:
/* Headings
----------------------------------------------- */
h2 {
margin: 0 0 1em 0;

font: $(widget.title.font);
color: $(widget.title.text.color);
text-transform: uppercase;
}

/* Widgets

e cola o código em cima de "/* Widgets"

espero ter ajudado

Anônimo disse...

e como funciona isso nos novos templetes?
nao tem tem nenhuma linha dessa.

podem me ajudar?

Victor P. disse...

Olá, achei o tutu otimo mas pra mim nao deu certo.
O que acontece?
é o seguinte eu coloco o codigo tudo certinho nada errado mesmo, e visualizo da aquele erro de que nao ta fechado corretamente mas esta (<> ). oq fazer?

PS: O template foi construido por mim e totalmente e editado e personalizado(bagunçado ^^)(portanto nao eh um template padrao minima ou outro do tipo).
Meu blog: http://animes-u.blogspot.com

ainda em construção, mas isso eh muito importante pra poder colocar o anuncio do adsense ¬¬. mas nao to conseguindo por, meu objetivo era colocar em cima do post(em baixo do cabeçalho)igual aqui no sue blog.

Pode me ajudar com esse tutu ou fazer um de como colocar o codigo do adsense direto no html do blog e mover ele la pra cima do post?

vou olhar aki os comentarios todos os dias ^^, espero sua resposta. vlw

Victor P. disse...

Olá, achei o tutu otimo mas pra mim nao deu certo.
O que acontece?
é o seguinte eu coloco o codigo tudo certinho nada errado mesmo, e visualizo da aquele erro de que nao ta fechado corretamente mas esta (<> ). oq fazer?

PS: O template foi construido por mim e totalmente e editado e personalizado(bagunçado ^^)(portanto nao eh um template padrao minima ou outro do tipo).
Meu blog: http://animes-u.blogspot.com

ainda em construção, mas isso eh muito importante pra poder colocar o anuncio do adsense ¬¬. mas nao to conseguindo por, meu objetivo era colocar em cima do post(em baixo do cabeçalho)igual aqui no sue blog.

Pode me ajudar com esse tutu ou fazer um de como colocar o codigo do adsense direto no html do blog e mover ele la pra cima do post?

vou olhar aki os comentarios todos os dias ^^, espero sua resposta. vlw

Ariane disse...

Victor vamos por partes. Olhei o código do seu template e apesar de ter dividido o cabeçalho, o header-wrapper está com height (altura) 0px e uma das divs (a que seria para o anúncio) está sem float. Porém, se o que você quer é colocar os anúncios sobre os posts, como fiz aqui, você deve colocar dois blocos de anúncio dentro de uma tabela e inserir nun gadget HTML e arrastá-lo para o espaço sobre os posts, em Elementos de Página.

Victor P. disse...

Pela tabela nao consegui, ai peguei e converti o codigo do adsense nun site ai, e coloquei ele dentro de uma div com magin-top e left ai so fui alterando.
Mas brigadão pela atenção, e nao esperava que vc iria responder tao rapido ^^, parabens pelo blog, muito bonito e completo,alguns centavinhos ai vao ser meus pode deixa que vo clica ^^
flw.

Victor P. disse...

Ariane, fui entrar em contato mas la estava escrito para n perguntar sobre codigos entao vo falar por aki mesmo ja que estamos no assunto.

Olhe a img = http://i55.tinypic.com/5wvuip.jpg

Quadrado preto = imagem maior que fique atras.
Quadrado branco = codigo do adsense(imagem dele) que fique sobre o quadrado preto.
PS: Eu posto o codigo do adsense quando vou postar um artigo(modo manual) e nao automatico com codigo na hmtl do blog.

Oque você quer?
Simples, deixar o codigo do adsense(ou seja a imagem clicavem dele) sobre uma outra imagem que eu vou fazer como se fosse uma borda.

Você sabe fazer isso que eu quero? pod me encinar?

vlw, espero resposta.

Ariane disse...

Victor eu entendi o que você quer e até acho que dá pra fazer sim (se você cria uma div dentro do post, coloca o anúncio dentro dessa div e no CSS determina o background dessa div, acho que fica ok). No entanto, devo te alertar que (veja bem, não tenho 100% de certeza, mas quase...) acho que isso vai contra as diretrizes do adsense (se for o caso) e é melhor dar uma lida na página deles ou mesmo procurar saber no forum de ajuda para não correr o risco de ser banido do programa, ok?

Victor P. disse...

consegui fazer ^^ so usando div, nem mechi no css.
tomara que nao seja proibido.
Vo da uma lida la,obrigado por avisar nem tinha me ligado ^^
vlw, teh +

Victor シ disse...

olá dinovo eu xD, as tags do meu blog nao estao funcionando tags do tipo de texto b i . tags de negrio italico essas

eu nao consigo mais posta em negripo com o editor nem com o velho e nem com o novo, desconfio que seja alguma coisa no hmtl do blog mas nao sei onde é
pode me ajudar?

Obs: as postagens que estao em negrito la nao sao com as tags "<b" eh outro codigo

espero resposta

ADM disse...

nao consegui, aperto ctrl+f pra procurar e nao acho nenhum código pra poder mudar!!!

( Talyta A.) disse...

Ariane,pq não lança um tuto como dividir um footer ? (rodapé?)
Obrigada por partilhar! Bjs!

Taylor disse...

eu nao consigui )=

Postar um comentário

Os comentários são moderados.