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

29 abril 2011

Dividir o Header (cabeçalho) - Novos Modelos

Este tutorial se aplica aos novos modelos de template (Designer do Modelo)

Para dividir o cabeçalho (header) nos novos modelos de template:

1- procure pelo seguinte trecho de código, no template (Editar HTML):
<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Novo Design Blogger (Cabeçalho)' type='Header'/>
</b:section>
</div>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</header>

2- Substitua tudo por:
<div class='fauxborder-left header-fauxborder-left'>  
<div class='region-inner header-inner' style='width:49%; float:left'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Designer do Modelo (Cabeçalho)' type='Header'/>
</b:section></div>

<div class='fauxborder-right header-fauxborder-right' style='width:49%;float:right;height: auto;'>
<b:section class='banner' id='banner' maxwidgets='1' showaddelement='yes'>
</b:section>

</div>
</div>

<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</header>
<div style='clear:both;'/>

3- Salve a modificação e veja em Elementos de Página, como deve ficar o cabeçalho já dividido:


4- Dependendo da largura do layout (eu usei 990px) será preciso fazer ajustes na posição do banner. Para isso, vá em Designer do Modelo -> Avançado e em Adicionar CSS coloque o seguinte código:

#banner{margin: 20px 20px 0px 0px;}

Vá alterando os valores de margin até que o banner ocupe a posição desejada.

Meu modelo, antes e depois da alteração:

Antes
Depois

Artigos Relacionados

26 comentários:

Anônimo disse...

Funcionou direitinho! Obrigado pela ajuda e parabéns pelo blog!

Zig.ZaG'Abrahão disse...

Eu editei um template para meu blog, mas o banner não fica completo.. quando aumento a largura maxima do banner a página tbm aumenta(o template tem essa divisão citada no post e não consigo tirar). Tens como me ajudar?

Ariane disse...

ZigZag desculpa, mas não entendi bem a sua dúvida. deixa o link do blog em questão p/ que eu possa ver como ficou.

Gestão de Pessoas disse...

Muito bom Ariane, Muito obrigado pela dica.

Anônimo disse...

Muito Obrigado pela dica Ariane !!

Lee Yoon-Ji disse...

Funcionou direitinho! Valeu, amiga.

marcia(Noticias do Mundo) disse...

muito legal as dicas que você dá

Kursch disse...

Eu queria fazer isso, mas o meu:

"fauxborder-left header-fauxborder-left"

fica na linha 701

E o meu:

"/header"

Termina na linha 782...

@BiielCunhaS disse...

AAAAAAAAAAAAA! Amei, com certeza colocarei (JÁ COLOQUEI!) no meu blog!

Alicson Monteiro disse...

funcionou muito bem, apenas não entendi como alterar as dimenções em margin, mas ficou exatamente como imaginei

ruimnm disse...

Desde já quero agradecer a generosidade da partilha das dicas.
Já experimentei um par de ideias suas.
Esta divisão do cabeçalho também e resultou muito bem.
O problema é que as páginas ficaram desalinhadas à direita e umas em cima das outras.
Como porei fazer para as voltar a colocar à esquerda, uma ao lado da outra?
grato pelo tempo disponibilizado. ;)

Camila Zaponi disse...

Oi Ariane...
E se eu quiser fazer o trabalho inverso? De um template que já vem o header dividido e eu quiser transformar em um só, tem como?

Marília Santos disse...

Olá eu fiz como e detalhado e o que aparece é uma mensagem de erro:
Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.

O prolema é q ñ aparecia antes e ñ importa o quanto eu procure ñ estou encontrando a tag q esta aberta!

Glauber Bandeira disse...

Não consigo encontrar o primeiro codigo.

Elcio Oliveira disse...

MUITO OBRIGADO DICA MUITO BOA!

Débora disse...

oi
fiz e deu tudo certo... fiquei mega feliz...
So nao entendi como colocar as postagens na paginas novas e continuar na home tambem...

Fabrica de Blogs disse...

Ariane, informações muito úteis encontrei em seu blog. Vou visitá-la mais vezes. Abraços!

Kevin Oliveira disse...

Ariane, como está?

Utilizei este hack para dividir meu header só que tive o seguinte problema... Em resoluções maiores que 1024x768 o header fica deste jeito (http://img694.imageshack.us/img694/4710/printerro.png), vai se afastando do layout e se quiser ver melhor o template é este (teste-designereffects.blogspot.com), já tentei de tudo e não consegui, espero que me dê uma resposta, obrigado..

e sucesso!

att, Kevin.

Kevin Oliveira disse...

Ariane,

consegui resolver o bug, mas por favor coloque a minha resposta ai, acho que não foi só eu que sofri com isso.

obrigado..

att, Kevin.

Joana Modista disse...

Oi, uma coisa que não entendo, como vou procurar pelo Ctrl + f ?
porque se for não estou achando e ja mudei o baner.
obriada

Joana Modista disse...

porfavor me ajuda, meu design sumiu. ;(

mensagens subliminare disse...

0brigado pelas dicas, vlw.

Anônimo disse...

Olá!
Minha imagem na parte superior, atrás do Titulo e descrição, não fica no tamanho da largura da página, todos os outros elementos ficam na largura X mas a imagem fica bem menor.

Como faço para aumentar? Já coloquei imagens de tamanhos diferentes e não funcionou.

Poderiam me ajudar, por gentileza.

agradeço desde já

Henrique disse...

Ariane não con seguir acha o htlm que vc disse tem como me ajudar?

| TL | foтogrαfiα disse...

Olá Ariane, minha duvida e a seguinte!
Eu quero colocar meu cabeçalho bem no topo, mas ele não fica, começando da navbar sabe??? igual o seu, como faço pra ele subir??
Fico grata se me responder..

Viajandonovermelho disse...

Ariane,

Tentei incluir e aparece essa mensagem de erro

Erro ao analisar XML, linha 732, coluna 3: The element type "div" must be terminated by the matching end-tag "".
o que preciso fazer?

Postar um comentário

Os comentários são moderados.