Como dividir o cabeçalho do blog em duas partes

Já recebemos alguns pedidos e agora vamos mostrar como fazer para dividir o cabeçalho do blog em duas partes, assim podemos colocar mais alguma coisa ao lado do titulo do blog em vez de ter que usar alguma imagem gigantesca para ocupar espaço.

Publicamos uma atualização deste tutorial mostrando como dividir cabeçalho do Blogger em dois nos novos templates (Design do Modelo). Portanto se o seu html for diferente deste mostrado aqui, veja no link.

Layout do Blogger

Esse procedimento é simples, mas leia essa explicação até o final antes de começar, pois será necessário fazer algumas alterações no código antes de colocar no seu blog, entre na pagina editar html e procure por:

<div id='header-wrapper'>
<b:section class='header' id='header' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Frases Curtas (Cabeçalho)' type='Header'/>

<b:widget id='HTML7' locked='false' title='' type='HTML'/>
</b:section>
</div>

Depois substitua por:

<div id='header-wrapper'>
<div id='header-column-container'>
<div id='header2' style='width: 74%; float: left; margin:0; '>
<b:section class='header-column' id='header-column-left' preferred='yes' style='float:left;'>
<b:widget id='Header1' locked='true' title='Frases Curtas (Cabeçalho)' type='Header'/>
</b:section>
</div>
<div id='header3' style='width: 25%; float: right; margin:0; '>
<b:section class='header-column' id='header-column-right' preferred='yes' style='float:right;'>
<b:widget id='HTML7' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div style='clear:both;'/>
<div id='header-bottom'>
<b:section class='header' id='header-column-bottom' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>
</div></div>

Como já dissemos antes modificar qualquer coisa no seu blog repare nas linhas que estão em negrito no código, no seu blog elas serão parecidas com essas não exatamente iguais e dependendo podem ter até mais do que duas linhas desse tipo, então você precisa copiá-las e substituí-las neste código antes de colocar no seu blog.

Você pode notar que a parte onde está a linha <b:widget id='Header1' locked='true' title='Frases Curtas (Cabeçalho)' type='Header'/> é a parte mais larga do cabeçalho(74%) e a outra <b:widget id='HTML7' locked='false' title='' type='HTML'/> na segunda parte que tem 25%, então coloque que estão neste trecho no seu blog como desejar e depois será fácil mudá-las de lugar pela pagina layout somente arrastando como qualquer outro gadget.

Para alterar as larguras ou lado das colunas do cabeçalho é só modificar essas partes do código:

width: 25%; float: right;
width: 74%; float: left;

Você notou que a soma dos valores não chega a 100% isso é para evitar que em alguns navegadores uma coluna fique embaixo da outra devido à falta de espaço. E para trocar as colunas de lado só precisa mudar de lugar as palavras left e right nos códigos. Espero que essa dica seja muito útil e ajude a melhorar o visual do blog.

Veja outras dicas:

Lista de links ou banners em ordem aleatória
Usando o Twitter
Melhorando a aparência dos marcadores
Links para traduzir o blog
Editar fotos online

Related Posts with Thumbnails
Como dividir o cabeçalho do blog em duas partes
4/ 5
Oleh

153 Comentários

4 de outubro de 2009 12:16 delete

Eu nuca te agradeci.Suas dicas me ajudaram muito no meu blog,eu sempre vejo se vc atualizou o blog pra pegar mais coisas,seu blog é demais

Reply
4 de outubro de 2009 13:40 delete

olaa vim lhe dizer que eu aodrei seu sitee, foi muito util para mim gostaria muito de receber sua visita em meus site , passa lah? beijos

Reply
4 de outubro de 2009 14:36 delete

Isto também funciona na parte de baixo do blog, se eu trocar "header" por "footer"?
Eu queria deixar o meu +/- como o seu, com os contadores em baixo do blog e lado a lado, mas não consigo.

Reply
4 de outubro de 2009 16:05 delete

Waaa Amei o post Fabiano!
Irei utlizar isso logo log, valeu pelas dicas, o site está cada vez
melhor e como eu sou iniciante em fazer blog você está me ajudando
pacas mesmo, Obrigada pela Ajuda,
E esperarei mais posts.

Reply
4 de outubro de 2009 17:05 delete

Obrigado!

Estava esperando por sua dica, me ajudou muito!

Reply
4 de outubro de 2009 19:52 delete

Marcelo Barreto da Fonseca
não fiz o teste mas deve funcionar sim, é como você mesmo disse troque por footer e deve dar certo

Reply
4 de outubro de 2009 20:07 delete

Que atencioso da sua parte! obrigada tah. vou tentar, ja tenho a musica no meu PC. o link que vc deixou nao esta linkando. vou tentar mais um pouco, rs! tenho que hospedar a minha musica em um site neh? obrigadinha e bj!

Reply
4 de outubro de 2009 20:31 delete

aqui tem uma enquete sobre musica no blog http://www.dicasparablogs.com.br/2009/03/melhor-site-de-musica-para-colocar-no_05.html

e aqui o link de alguns sites

http://www.dicasparablogs.com.br/2009/06/sites-com-musicas-para-colocar-no-blog.html

Reply
5 de outubro de 2009 21:04 delete

Desculpe fazer a pergunta em um tópico que não tenha tanta relação, mas queria saber se é possível integrar os seguidores do Twitter aos seguidores do blog. Em outras palavras, queria que os seguidores do twitter, aparecessem como seguidores do meu blog. Agradeço!

Reply
6 de outubro de 2009 14:54 delete

João Paulo Fernandes
acho que não é possivel integrar os seguidores do blog e do Twitter

Reply
6 de outubro de 2009 19:16 delete

Deu certo, Fabiano, trocar header por footer, mas não ficou como eu imaginava e algumas coisas mudaram de uma jeito que não deveriam e, como não sei impedir isso, deixei como já tava.

Bom post e obrigado pela atenção.

Reply
7 de outubro de 2009 07:22 delete

Muito bom o blog toda vez que estou querendo inova velho aqui para sabe das novidades. Vi que o amigo comentou no blog esta semana você ganhou o comentarista da semana " A regra e clara quem comenta no blog tudo grátis entrar para o sorteio de um banner para seu blog para ser exposto por uma semana se ganhar e claro"

Obrigado por compatilha seus conhecimentos conosco!

Reply
7 de outubro de 2009 14:45 delete

Olá, to passando para dizr que o Blog tá incrivel!!ja sou seguidor, e linkei o Dicas para Blog no meu blog também. Parabéns!!

Reply
11 de outubro de 2009 00:51 delete

Cara vlw eu tava a procura de um tuto como esse a meses e não achava vlw mesmo da uma olhada no meu blog www.superdownloads6.blogspot.com

Reply
11 de outubro de 2009 12:28 delete

Valew ai, consegui fazer e agora posso colocar gadget onde não podia antes.....Muito obrigado!!!

Reply
5 de novembro de 2009 17:19 delete

Você Pode Me Falar Como Colocar
Aquela Barra Em Baixo Do Titulo
Do Blog

Eu Lembro de Uma Postagem Sua Mais
Não Consigo Localizar

Reply
6 de novembro de 2009 18:37 delete

para colocar algo embaixo do cabeçalho é só adicionar um gadget, se não ficar no lugar certo clique sobre ele e arraste.

se estiver falando de menu com os links lado a lado veja aqui
http://www.dicasparablogs.com.br/2009/05/links-lado-lado-menu-horizontal.html

Reply
7 de novembro de 2009 21:08 delete

Oi, Fabiano, tudo bem?

Foi graças as suas dicas que consegui fazer um melhoramento gráfico em meu blog. Eu que trabalho na área da educação e ensino, estou sempre adicionando widgets relacionados a minha área e precisei criar mais colunas no sidebar e outras alterações. Gostei demais e, por isso, coloquei seu banner em meu espaço.

Um abração e valeu demais!!

Reply
Anônimo
22 de novembro de 2009 23:23 delete

Oi, eu queria saber como se aumenta o tamanho do cabeçalho do meu blog é que ele meu pequeno...Agradeço

Reply
23 de novembro de 2009 00:14 delete

as larguras do blog podem ser em varias partes, mas a principal é aqui #outer-wrapper{...

veja mais neste link sobre largura
http://www.dicasparablogs.com.br/2007/08/largura-do-blog.html

tudo isso é feito na pagina editar html

Reply
M&R
16 de dezembro de 2009 17:34 delete

Boa tarde, primeiramente quero dizer q seu site é ótimo e esta me ajudando muito...
Mas o q eu quero saber é o seguinte, se eu quiser dividir em mais de duas partes, como ficaria o código?
Se puder me ajudar em mais uma dúvida eu agradeço!
Abraços e parabéns pelo site!!

Reply
17 de dezembro de 2009 13:30 delete

M&R, você poderia colocar o trecho duas vezes
<div id='header3' style='width: 25%; float: right; margin:0; '>
<b:section class='header-column' id='header-column-right' preferred='yes' style='float:right;'>
<b:widget id='HTML7' locked='false' title='' type='HTML'/>
</b:section>

claro que tirando a linha do id html7, alterando o header3 para outro numero e também diminuindo as porcentagens para caber as 3 colunas dentro dos 100 %

Reply
15 de janeiro de 2010 22:50 delete

Olá, Fabiano!
Estou tentando dividir o cabeçalho do blog e depois da substituição aparece a mensagem "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.
Mensagem de erro em XML: The element type "body" must be terminated by the matching end-tag."
Poderia me ajudar?
Grata.

Reply
15 de janeiro de 2010 23:46 delete

Mundo da Arte
provavelmente copiou alguma caracter faltando no código ou na hora de alterar alguma coisa deu esse erro. tente colocar outra vez

Reply
Victor Teixeira
28 de janeiro de 2010 20:20 delete

o seu blog da show de bola, se não fosse o seu blog, o meu não seria nada!!

Reply
13 de fevereiro de 2010 11:29 delete

Como faz para colocar um Widget ao lado do outro no Blogger? meu blog é www.mecaopotengi.blogspot.com

Reply
13 de fevereiro de 2010 16:42 delete

Mecão Potengi
se quiser somente trocar de lado procure no seu tempo por #main e #sidebar, veja que dentro das chaves de cada um tem float: right; e float: left;, se troca-los de lugar as postagens do blog e a sidebar trocarão de lado.

mas se quiser colocar mais uma coluna no blog veja aqui

http://www.dicasparablogs.com.br/2007/12/blog-com-3-colunas.html

http://www.dicasparablogs.com.br/2009/11/colocar-mais-uma-coluna-no-blog.html

Reply
6 de abril de 2010 18:03 delete

Eu não consegui =/ Pra começar o meu blog não tem o < div id='header-wrapper' > e sim o < div id='header' > e se eu substituir lá o HTML não salva, fala que ta faltando < div > se coloco div da problema no body e assim vai... eu preciso muito duplicar o espaço do título pra poder por banner de propaganda.
Por favor, ajude-me, meu blog é esse: www.yessitthere.blogspot.com
se puder me ADD no msn: vncduart@hotmail.com ou mande a resposta para: sitthere@bol.com.br

Reply
6 de abril de 2010 18:20 delete

tem que trocar o trecho inteiro de uma vez. veja que no final tem varias divs sendo fechadas

Reply
6 de abril de 2010 22:59 delete

Eu troquei o trecho inteiro, troquei só parte dele, deixei os dois (...) na hora que deixei os dois prestou, só que não dividiu do lado e sim apareceu um elemento em cima, outra hora embaixo xD tentei isso a tarde inteira, por favor me ajuda? sempre leio o blog e adoro as dicas!

Reply
6 de abril de 2010 23:10 delete

O TRECHO DO MEU BLOG ( HTML ):
< div id= 'header' >
< div class='banner '>
< div class='logo '>


< b:includable id='title'>

< data:title />
< b :else/>
(...)

Reply
13 de abril de 2010 00:24 delete

Olá Fabiano!!
bom é seguinte...

estou com o seguinte problema, as vezes o cabesalho do meu blog simplismente não carrega. fica o espaço branco. e para carregar eu tenho q pegar o link da imagem e abrir em uma pagina individual...

dee uma olhada...

www.hentaisbr.net...

desde já agradeço.

Reply
13 de abril de 2010 15:00 delete

ADMIN --- Rui Carlos

entrei no seu blog e carregou normalmente a imagem do cabeçalho.

isso pode acontecer por falha na hospedagem da imagem ou então sua pagina está muito pesada, é bom de vez em quando ver o que poderíamos reduzir em nosso blog para ele carregar mais rápido.

Reply
16 de maio de 2010 06:55 delete

Olá Fabiano!
Gostaria de tirar uma dúvida contigo.
Desde que houveram essas mudanças na estrutura e layout do blogger (design de templates) o HTML e o CSS mudaram tb, então boa parte desdes códigos acabam não funcionando muito bem. Gostaria dividir a header do meu blog, mas ta tudo muito diferente.

Vc saberia como me ajudar?

ABRAÇO!

Reply
16 de maio de 2010 17:07 delete

Marco Antônio Gomes
vamos começar a publicar tutoriais sobre como alterar os novos modelos em breve

Reply
16 de junho de 2010 16:57 delete

Só para avisar que eu já consegui fazer o que eu lhe pedi no ultimo comentario, achei aqui no seu blog mesmo, seu blog está de parabéns

Reply
LuuhDalberto
20 de junho de 2010 01:58 delete

Olaa tudo bom ?
Bom, primeiramente, deixa eu dar os parabens.. esse site é muito bom!
Sempre que eu preciso de um help, venho aki e sempre acho! ;D

Obrigado esse site ja me ajudou muito! *-*

Boom seguinte...
eu tentei dividir o meu cabecario em doois mas nao estou conseguindo, aparece isso:

'' Mais de um item encontrado com o id: HTML7. Os IDs de itens devem ser únicos e exclusivos.``

o que eu faco ?
Desde já agradeco

beijoo

Reply
20 de junho de 2010 13:52 delete

LuuhDalberto
provavelmente na hora de copiar e colocar o código você deixou duas vezes a linha do html7, então apague uma delas

Reply
2 de julho de 2010 04:45 delete

Bacana curti o tutorial..
e eu gostaria de saber como eu posso colocar 2 imagens no topo do blog,sendo uma no centro e a outra por tras dela so q maior?
me ajudem por favor!

Reply
2 de julho de 2010 13:27 delete

John Loham
até é possivel fazer do jeito que falou, mas se puder use uma imagem só, carregará mais rapido.
senão coloque imagem de fundo no html do blog no estilo header-wrapper, assim:

.header-wrapper{background-image(endereço da imagem);}

mas não apague o que já estiver lá apenas acrescente o trecho background....

veja mais aqui:
Posicionar imagem de fundo

Reply
Igor
16 de julho de 2010 00:48 delete

Olá Fabiano, meu nome é Igor, sou grande fã de seu blog. Sei que esssa sua postagem foi feita a bastante tempo, mas tenho uma duvida que não consigo resolver de jeito nenhum. Bom, agora temos os novos estilos para o blogger (o designer do modelo), e essa postagem foi feita para o antigo. Eu precisei deixar o meu blog com um modelo antigo para poder colocar o cabeçalho dividido.
Mas só que no modelo antigo o meu blog fica estranho e eu ja adaptei as imagens para o modelo atual que eu uso.
Eu queria pedir para quer você pudece me ajudar, pode criar uma postagem explicando como dividir o cabeçalho no novo modelo do blogger, ou pode enviar uma mensagem para mim explicando(neste caso eu te envio o trecho do meu como fica ja que quando tentei colocalo no comentario deu erro).
Se voce quiser pode responder na postagem mesmo para as pessoas poderem conferir tambem.
Meu e-mail é caldeiramagalhaes.igor@hotmail.com
meu blog é
www.plxdicas.blogspot.com
Por favor responde, Igor

Reply
16 de julho de 2010 20:50 delete

Igor, vou preparar algo explicando como dividir o cabeçalho dos novos templates do blogger

Reply
21 de julho de 2010 18:34 delete

Olha é mto fácil o tutorial, e fiz, deu tudo certo. Mas aparece uma borda colorida em volta do banner, e sua borda está zerada... e agora?
Obrigada

Reply
22 de julho de 2010 15:18 delete

Silmara F. a borda não tem nada a ver com esse código, deve ser alguma outra coisa no html do seu blog, qual o endereço do blog que está com esse problema?

Reply
30 de julho de 2010 19:40 delete

ola mais uma vez.
e possivel ter um cabecalho de blog num template original do blogger
que ocupe o espaco num todo em cima.
ou seja que fique centralizado de ponta a ponta...
agradeco qualquer ajuda.
abraco

Reply
30 de julho de 2010 20:56 delete

você precisa fazer uma imagem na largura do seu blog e colocar no lugar do titulo, isso é feito pela pagina designer, clicando para editar o cabeçalho do blog

Reply
1 de agosto de 2010 11:46 delete

Olá.Seu blog vem me ajudado muito,suas dicas sao maravilhosas.
Segui este tutorial,mas nao deu certo no meu blog ficou uma coluna em cima da outra e para o lado esquerdo do blog,totalmente desproporcional!Ai depois lí aqui nos comentários que esse tutorial,é para os antigos modelos do blog,e eu uso os novos.
Com todo respeito,gostaria imenso que você trabalhasse em um segundo tutorial,para ajudar-nos.
Agradeço,abraços

Reply
1 de agosto de 2010 13:31 delete

vou verificar novamente, mas já fiz testes e funcionou nos modelos novos também

Reply
Hana Hibaf
18 de agosto de 2010 10:28 delete

Olá, o meu não aparece "div id='header-wrappe" como faço? o que procuro? obrigada

Reply
18 de agosto de 2010 12:18 delete

Olá Fabiano, gostaria de saber como dividir o cabeçalho com o modelo simples, no blogspot.com
Já tentei e não consigo.

O modelo novo não possui:
< div id = 'header - wrapper ' > no início e nem o 'div id'
Na área para mudar o código o que aparece é 'div class'

Se puder me ajudar.

Meu msn para contato:
gabrields.18@hotmail.com

Abraços e ótimo blog!

Reply
18 de agosto de 2010 14:57 delete

esses novos modelo são um pouco diferentes, mas pode fazer com esse que achou que funcionará normalmente.

apenas salve uma copia do seu modelo antes de começar, caso tenha algum problema

Reply
18 de agosto de 2010 18:08 delete

Olá, me desculpe mas tentei encontrar o trecho inicial para editar mas não obtive sucesso. Gostaria que me ajudasse, estou mantendo meu blog em manutenção e só falta exatamente isto para colocar minha caixa de pesquisa ao lado do título do blog. Ficaria muito grato se recebesse sua ajuda. Abraço

Reply
19 de agosto de 2010 14:34 delete

fizemos um teste em um outro blog que temos e os códigos funcionam da mesma maneira apenas algumas tags tem nomes diferentes, veja como ficou:

<div class='region-inner header-inner'>
<div id='header-column-container'>
<div id='header2' style='width: 74%; float: left; margin:0; '>
<b:section class='header-column' id='header-column-left' preferred='yes' style='float:left;'>
<b:widget id='Header1' locked='true' title='Sites Úteis e Interessantes (Cabeçalho)' type='Header'/>
</b:section>
</div>
<div id='header3' style='width: 25%; float: right; margin:0; '>
<b:section class='header-column' id='header-column-right' preferred='yes' style='float:right;'>
<b:widget id='HTML9' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div style='clear:both;'/>

Reply
25 de agosto de 2010 12:13 delete

Meu blog é baseado no novo design de modelo, e não conseguir mudar, nem achar esse código html, descrito acima.

Reply
27 de agosto de 2010 21:10 delete

Eu não entendi direito isso, mas pode acreditar seu blog é incrivél.

passa no meu blog qualquer dia

Reply
28 de setembro de 2010 21:32 delete

Caro Fabiano, não consegui substituir o código que você modificou. Você não especificou aonde substituir o código, no meu blog, há uma muitas linhas de diferença entre o (cabeçalho) e HTML9 (q no meu caso é 3). Tentei substituir tudo e não completou. Agradeço se puder me auxiliar.

Att. Breno

Reply
28 de setembro de 2010 21:40 delete

nos templates novos o código é um pouco diferente, veja nosso comentário anterior sobre templates diferentes

Reply
5 de novembro de 2010 16:15 delete

aqui no meu nem axou esse primeiro codigo

" div id='header-wrapper' "


deve ser diferente tb?

abraços

Reply
14 de novembro de 2010 14:02 delete

Fabiano, como aço para dividir o cebeçalho do template iNove no Blogger?
Já tentei desse seu jeito e do jeito do TNB mas não consegui :(
Me ajuda aee se puder ;)

Reply
28 de novembro de 2010 00:48 delete

amigo eu ñ conseguir encontrar o codigo
(div id='header-wrapper)
no editar html pq vc poderia me responder?
eu agradeceri muito, desd ja abraço!!!

Reply
2 de dezembro de 2010 11:08 delete

Vlw, somente com sua dica consegui dividir o cabeçalho do meu blog.

Parabéns pelo post

Reply
5 de dezembro de 2010 13:01 delete

Amigo, eu tenho uma duvida não muito relacionada no post mais é sobre cabeçalhos:
- Como fazer para que a imagem do cabeçalho mude aleatoriamente quando alguém (visitante)mude de pagina?
Não sei se expliquei direito.
Me ajude!

Reply
5 de dezembro de 2010 13:26 delete

para fazer um banner diferente cada vez que a pagina é carregada tem que ser com um gadget, veja aqui Banner Rotativo

Reply
Bruno Elvis
29 de dezembro de 2010 17:30 delete

Parabéns pelo blog, muito bom e ajudando bastante. Eu queria saber como faço pra achar esses códigos, já procurei várias vezes e nao achei.

Reply
29 de dezembro de 2010 18:39 delete

se você usar um dos novos templates os códigos são um pouco diferentes procure por

<div id='header-column-container e quando trocar o código use esse mesmo estilo na primeira linha, onde falamos para colocar <div id='header-wrapper', mantenha o <div id='header-column-container

Reply
18 de janeiro de 2011 09:34 delete

Olá!
Fiz a substituição no meu blog de acordo com o seu comentário do dia 19 de agosto de 2010. Aparece a seguinte mensagem:

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.
Mensagem de erro em XML: The element type "div" must be terminated by the matching end-tag "

Como posso resolver esse problema?
Obrigada

Reply
18 de janeiro de 2011 14:15 delete

cole o código no bloco de notas antes de passar para o blogger, as vezes gera erro copiar de uma pagina para outra...

veja também os detalhes na hora de trocar os sinais ' é diferente de "

Reply
18 de janeiro de 2011 15:26 delete

Olá prof. Fabiano!

Boa tarde!
Eu te mandei um e-mail. Por favor, vá ao seu e-mail, leia e responda e solucione o meu problema.

Obrigado!
Gustavo Reis

Reply
Ronald
28 de janeiro de 2011 19:51 delete

como faço tipo pra image do meu cabeçalho mudar alertoriamente colocar varias imagem e conforme atualiza a pagina muda como fasso isso? sem ser gifs

Reply
14 de fevereiro de 2011 12:31 delete

eu nao consigo encontrar o html q vc disse para procurar eu coloco ctrl+f e colo la mas nao aparece.
pode me ajudar?

Reply
14 de fevereiro de 2011 13:35 delete

nos templates novos o código é header-column-container em vez de header somente

Reply
17 de março de 2011 19:14 delete

Consegui!
Ficou ótimo. Parabéns!

Reply
27 de março de 2011 00:19 delete

Olá Fabiano Roberto!
Muito importante o que você está fazendo, compartilhando o q aprendeu com os leigos, no meu caso...
Meu caro, eu já chequei as postagens anteriores e não encontrei a solução para meu problema...
Um amigo meu pediu-me ajuda, por ser pior do que eu, para criar um blog pra ele. Porém, não sou muito conhecedor do ramo.

Reply
11 de abril de 2011 17:13 delete

olá Fabiano coloquei esse código no modelo (espetacular lmt )e coloquei um bloco de anúncios
de 728 por 90 mais o gadget contem uma margem que esta encobrindo um pedaço do cabeçalho e quando coloco um valor maior no cabeçalho um valor menor na porcentagem da nova coluna ela recua para o lado esquerdo, gostaria de saber como corrigir esse problema e estipular o tamanho do cabeçalho e da margem do bloco de anúncios?
É interessante dizer que o alinhamento horizontal esta perfeito.
não sei se terei que criar uma margem para o elemento pois a margem do código só empurra ele pra baixo até 5px depois disso o elemento se posiciona abaixo do cabeçalho.
basicamente meu problema esta nessa bendita margem que ocupa um espaço de mais ou menos 80px;
agradeço por ler minha duvida e peço a sua ajuda
caso você possa me ajudar!!!

Reply
11 de abril de 2011 17:33 delete

andre
problemas de falta de espaço é ruim de resolver, veja se tem margin ou padding gerando esse espaço vario no seu html

mas talvez seja interessante colocar esse banner 728x90 fora da divisão do cabeçalho

Reply
11 de abril de 2011 18:08 delete

obrigado brigado pela rapidez em me responder,já avia checado e não encontrei nada gerando espaço mais msm assim agradeço pela atenção!
creio que não seja falta de espaço VC pode até dar uma olhada se vc quizer!

Reply
11 de abril de 2011 18:34 delete

já avia checado e não encontrei nada, mais mesmo assim Agradeço pela rapidez da resposta!
caso você queira ver como esta vai lá e da uma olhadinha!
o espaço que esta sobrando seria ocupado por um cabeçalho mais largo.

Reply
12 de abril de 2011 14:35 delete

Video Galeria X
você está usando o banner em algum dos seus blogs agora? qual?

tente arrastar para ficar antes da divisão das colunas, entrei no "Meus Recados Favoritos" e o banner 468 está sobre as postagens, para usar um 728 deveria posicionar mais acima antes das colunas

Reply
12 de abril de 2011 20:23 delete

Fabiano eu consegui melhorar um pouco com um (padding)que adicionei embaixo do código da margem do cabeçalho é assim msm aos poucos agente vai adaptando o modelo, dá uma olhada lá agora ta aberto rsrs..

Reply
9 de maio de 2011 12:05 delete

cara suas dicas me ajudaram muito!
mas no meu blog naum funcionou corretamente
eu fiz mas deu error, temtei varias vezes mas nada
sera que é o templante??
da uma olhada, e me ajuda porfavor:
http://naruto-9tails.blogspot.com/

Reply
9 de maio de 2011 13:42 delete

felipe
essas alterações de html precisam ser exatas, se faltar ou sobre algum caracter dá erro...

veja se abriu e fechou todos os sinais < > ' e "

outro detalhe ' e " são coisas diferentes se abrir com um e fechar com o outro dá erro

Reply
12 de maio de 2011 13:40 delete

De muitas lidas na postagem consegui fazer...obrigado. site nota 1.000

Reply
28 de maio de 2011 02:35 delete

Fabiano... Tem um bom tempo que uso esta dica, mas agora quero voltar atrás. Como que faço isso?

Reply
28 de maio de 2011 17:12 delete

Natália
tem que olhar os códigos no seu blog e neste tutorial e tentar desfazer o processo, ou seja retirar os códigos que adicionou e voltar os originais como estão no começo deste tutorial

Reply
18 de junho de 2011 22:47 delete

Fabiano eu ñ consegui dividir o cabeçalho em 2 partes, no meu blog ta diferente ñ achei a 1ª parte do código, o q devo fazer? vc ñ fez nenhum vídeo esplicando como faz?

Reply
19 de junho de 2011 00:32 delete

a primeira parte é como está no seu blog e a segunda e como fica depois da alteração

Reply
19 de junho de 2011 20:48 delete

Fala Fabiano!
meu menu horizontal desandou depois que dividi o cabeçalho, e não descobri como fazer funcionar de novo. blog texte: texte32.blogspot.com

Reply
19 de junho de 2011 21:17 delete

Luciano
talvez o seu menu tenha ficado na parte que dividiu o cabeçalho...

por exemplo nosso blog o cabeçalho é dividido mas o menu fica abaixo da divisão

Reply
19 de junho de 2011 21:46 delete

O Menu não funciona mais em parte Alguma.
O detalhe é que quando substitui por este código boa parte do código original fica de fora.

Reply
19 de junho de 2011 22:01 delete

então provavelmente você alterou ou apagou algo errado no seu template... infelizmente não tem como desfazer isso

Reply
20 de junho de 2011 22:18 delete

Fabiano eu nao consegui dividir a um bom tempo que tento mas nao consigo
meu templante é o novo[ou pelo menos acho]
e nao consigo achar a tag header-wrapper
me ajuda pf
desde ja obrigado

Reply
21 de junho de 2011 13:53 delete

alguns templates são diferentes... por isso é complicado fazer essa alteração...

Reply
21 de junho de 2011 22:17 delete

Fabiano agora deu certo, ñ tava dando certo pq eu ñ tava entendendo o código agora eu entendi fiz direito e deu certo (no meu código é diferente a 1ª tag)
valeu

Reply
8 de julho de 2011 21:51 delete

Não consegui achar o trecho! tentei no ctrl+F!!
Até procurei somente por div id='header-wrapper' (com as setas - comentar n dexa)
Mas não achei... poderia me dizer oq eu fasso? :P

Reply
8 de julho de 2011 22:23 delete

Concegui achar!!! obrigado!!

Reply
14 de julho de 2011 16:45 delete

tem como fazer isso dos 2 lados do cabeçalho?
se sim, como?
(se botar esses html, diz a alteração como se já tivesse 2 -dividido-). desde já, obrigado

Reply
14 de julho de 2011 17:16 delete

Wagner
não fiz o teste, mas deve ser possivel, só tem que duplicar o código que adicionamos neste tutorial, mas precisa trocar o nome de right para left e mudar o nome header3 para header4 para não ter nomes duplicados... mas salve um cópia do seu template antes de fazer... pois pode dar algo errado ou faltar algum ajuste

<div id='header3' style='width: 25%; float: right; margin:0; '>

<b:section class='header-column' id='header-column-right' preferred='yes' style='float:right;'>

<b:widget id='HTML7' locked='false' title='' type='HTML'/>

</b:section>

</div>

Reply
15 de julho de 2011 14:06 delete

mas ficou assim... CABEÇALHO - header4 - header3
depois eu ia trocando os lefts e rights... ficou assim:
header4 - header3 - CABEÇALHO
- Qria que ficasse assim:
header4 - CABEÇALHO - header3
não concegui...

Reply
15 de julho de 2011 20:54 delete

então use um com left e outro com right... se possivel deixe o html do cabeçalho no meio

Reply
17 de julho de 2011 11:16 delete

sim, mas o cabeçalho fica left ou right?

Reply
17 de julho de 2011 11:21 delete

a, sim! agora concegui!
brigadão mesmo.
desculpe dar tanto trabalho ^^

Reply
17 de julho de 2011 13:45 delete

depende em qual lado você quer... faça o teste e veja qual fica melhor

Reply
21 de julho de 2011 13:35 delete

Olá Fabiano,
Eu coloquei o código e deu super certo porém, quando alterei o fundo no designer de modelo as gadgets q estavam com as bandeiras para tradução e para pesquisa desceram para o penúltimo lugar na lateral direita. Como faço para que voltem para o cabeçalho? Este é o link:

http://liahail.blogspot.com/


Obrigada Seu site é incrível

Reply
21 de julho de 2011 14:18 delete

Marília Santos
já tentou arrastar o gadget para mudar a posição dele na pagina?

Reply
21 de julho de 2011 15:17 delete

Sim já tentei, o problema é que quando entro em "design" não aparece a divisão que eu fiz no cabeçalho, na verdade ela está na lateral onde te falei (e por acaso está dividida em 2 colunas, sem que eu tenha feito isso) e eu não faço ideia de como reverter pois estou não estou encontrando o código mais..

Reply
21 de julho de 2011 15:50 delete

Marília Santos
tente olhar os códigos deste tutorial e do seu blog... e tente desfazer, ou seja apagar e voltar ao original que mostramos no inicio

Reply
30 de julho de 2011 16:01 delete

Olá Fabiano, obrigado por postar. Queria aplicar o apresentado ao meu blog, para colocar uma caixa de busca do lado do cabeçalho. No entanto, não acho por <*div id='header-wrapper'*> (sem asterisco).

Será que o motivo é que eu uso uma imagem no lugar de um texto para o cabeçalho? Meu modelo é baseado em Espetacular Ltda. O link: http://thesimshousedownloads.blogspot.com/

Grato.

Reply
30 de julho de 2011 17:16 delete

os novos templates do blogger tem tags diferentes... então tem que fazer testes ou procura pela largura da coluna.. é o jeito mais facil de achar o local exato

Reply
30 de julho de 2011 18:37 delete

eu também tava com esse problema mas no html eu pesquisei por "Cabeçalho" e consegui achar, tente pesquisar também por "Cabeçalho"

Reply
24 de agosto de 2011 22:20 delete

Fabiano como faço pra colocar o cabeçalho esticado na página toda? igual nessa imagem http://i55.tinypic.com/nfjpe0.jpg

e qual programa voce usa pra fazer templates?

Reply
25 de agosto de 2011 14:38 delete

Rosiel T.S.
isso depende do html do seu blog.... mas poderia ser feito com imagem de fundo, veja aqui: Fundo Degrade

Reply
30 de agosto de 2011 18:42 delete

Olá,
eu ñ consegui :(,quando eu procuro o codigo para substituir pelo outro o blogger diz q não existe(p/ eu encontrar um codigo no html eu aperto ctrl+f,e quando eu procuro o codigo ela diz q não exite).
Pode me ajudar?
-http://cookeberry.blogspot.com

Reply
31 de agosto de 2011 15:23 delete

alguns templates tem códigos diferentes e por isso não funciona em todos...

mas pelo que falou deve ter colocado algo errado na hora de colar o código, veja se não apagou algum sinal < > / e nas alterações que fizer use ' e não aspas, isso também gera erro

Reply
31 de agosto de 2011 19:40 delete

Obrigado pela dica,bem eu queria fazer um pedido se você poder poderia ensinar como colocar uma imagem dividindo duas postagens....tipo aquelas linhas que dividem 2 postagens mas e vez disso uma imagem.
Obrigada
Sofia

Reply
1 de setembro de 2011 15:27 delete

Cooke Berry

veja aqui Separação entre as postagens do blog

depois é só usar uma imagem no local indicado

Reply
8 de setembro de 2011 21:20 delete

Atenção adm eu não estou achando o header-wrapper acho que porquê uso o template "simples" do blogger...
o que faço?

Reply
8 de setembro de 2011 21:24 delete

Eu uso o template "simples" do blog e não estou achando header-wrapper.
Ajude-me, por favor.
Agradeço...

Reply
8 de setembro de 2011 22:06 delete

Eu também queria saber como eu coloco o Título e o menu horizontal das páginas par que eles fiquem do tamanho completo da página...
Tem como?

Reply
9 de setembro de 2011 15:26 delete

Diego Martins
procure por header, isso varia um pouco conforme o template...

sobre o menu : Links lado a lado (menu horizontal)

no trecho :#page-bar li a{
margin: 0px;
color:#000000;
display:block;
text-decoration: none;
width: 150px;

você ajusta a largura dos botões: width: 150px;

Reply
17 de setembro de 2011 10:03 delete

oLA gOSTARIA DE dividir o cabeçalho mas tb ta dando erro me explica direitinho please

Reply
17 de setembro de 2011 11:02 delete

no modelo simples eu procurei por header e achei tantos que... rsrsr

Reply
24 de setembro de 2011 21:09 delete

fabiano, Como faço para dividir a pagina do blog em quadros tipo deste blog> http://brfutblog.blogspot.com/ e tambem como colocar botões das redes socias iguais daquele blog?

Reply
24 de setembro de 2011 21:38 delete

Everson Cartoleiro

o código para os posts em caixas não tenho, mas os botões aqui está o código: Botões das Redes Sociais na Vertical - Compartilhar Posts

Reply
25 de setembro de 2011 10:40 delete

vlw mesmo assim, vou continuar procurando este codigo, té mais!!!

Reply
26 de setembro de 2011 20:39 delete

ajudou muito mesmo...

Porem não sei porque, não gosto do seu blog.
Acho que e por causa do designer do blog

Mais o que importa e o conteúdo, muito bom...

Reply
27 de setembro de 2011 15:54 delete

Fabio Fontes
pretendo trocar o template em breve... assim que conseguir um tempo, porque o problema não é trocar mas sempre tem os ajustes e imprevistos

Reply
Guilherme Calvelli
12 de outubro de 2011 22:09 delete

Acho que nunca agradeci a este blog antes e tá na hora de dar um agradecimento, né? Parabéns e muito obrigado, as suas dicas ajudam demais! Muitos acabam conseguindo um layout decente, por causa de vocês e muitos não entendem nada, e é com essa ajuda de vocês que eles conseguem algo no HTML. Sempre tive vontade de aprender html, e admito que a maior parte eu aprendi com o Dicas Para Blogs e não só vocês, mas todos esses sites que tentam ajudar. Obrigado de coração, por ter essa boa vontade de ajudar.

Reply
5 de novembro de 2011 16:34 delete

PODE DIZER COMOFUNCIONA O HTML DO NOVO TIPO DE BLOG,O:VISUALISAÇÕES DINÃMICAS.

Reply
Anônimo
14 de dezembro de 2011 20:42 delete

Cara, eu consigo divir e corrigir as larguras no blog em meu pc (de 22 polegadas), mas só que quando vou ver em outro pc, de 14, por exemplo, o cabeçalho e o banner ficam tortos, ou seja não ficam alhiandos com plano de fundo principal. O que eu posso fazer???

Reply
15 de dezembro de 2011 14:41 delete

@Anônimo o melhor a fazer é ajustar seu blog para a maioria dos visitantes, veja no contador de visitas qual a resolução de tela da maioria.

no momento uso largura 990, porque a maioria dos visitantes usa 1024x768

Reply
20 de dezembro de 2011 16:14 delete

Depois de muita procura finalmente achei um tutorial que funcionasse com meu template "mexido".

Obrigado!

Reply
20 de dezembro de 2011 16:17 delete

Só uma pergunta, como eu faço pra alinhar centralizar o conteúdo desse segundo bloco?

Reply
21 de dezembro de 2011 00:55 delete

@Adriano Michalzeszen se adicionar um gadget deve conseguir arrastar para que fique ocupando a largura total do blog.

centralizar o conteudo de gadget é outro assunto e dependendo é um pouco complicado de fazer

Reply
21 de dezembro de 2011 10:27 delete

Então cara, meu problema é esse daqui: http://i.imgur.com/h1pXg.png

eu queria centralizar esse Adsense ali, e possivelmente irei utilizar o espaço para outras coisas quando ouver comunicados, editais lançados, etc, dai queria manter essa área centralizada, mas não consegui de forma alguma!

Reply
21 de dezembro de 2011 10:50 delete

@Adriano Michalzeszen o template alinha ao centro contando a pagina completa, ou seja com aquele menu lateral junto (onde tem o anuncio do adsense e outras coisas)

mas parece bom o layout do seu blog

Reply
25 de dezembro de 2011 21:58 delete

Eu não achei o trecho que tem que substituir no meu html, ate usei o ctrl + f , mas não consegui :/

Reply
1 de janeiro de 2012 22:11 delete

Como você tirou aquela barra branca que fica no título do modelo espetacular?

Reply
2 de janeiro de 2012 00:17 delete

@Nee-san barra branca? não entendi exatamente do que está falando mas deve ser cor de fundo ou borda

Reply
23 de abril de 2012 15:50 delete

Onde eu devo colocar os códigos neste templete?
LINK
http://dfsdfsdfdsssssssssssssssssssssssss.blogspot.com.br/

Reply
24 de abril de 2012 15:48 delete

se o seu template não é desse tipo veja no inicio do tutorial tem um link para dividir o cabeçalho nos novos templates

Reply
26 de abril de 2013 13:31 delete

Fabiano...
2 vezes é a única opção?
Se eu quisesse dividir em mais veses tem como?

Reply
26 de abril de 2013 16:23 delete

é possivel dividir em mais colunas mas precisa criar as colunas repetindo o trecho e colocando outro nome pode continuar a numeração


< div id='header3' style='width: 25%; float: right; margin:0; '>
< b:section class='header-column' id='header-column-right' preferred='yes' style='float:right;'>
< b:widget id='HTML7' locked='false' title='' type='HTML'/>
< /b:section>
< /div>

Reply
26 de abril de 2013 17:11 delete

Ok. Vou tentar
Brigadim mais uma vez!

Reply