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

Link desta Pagina

Compartilhe essa Página

153 comentários:

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

    ResponderExcluir
  2. 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

    ResponderExcluir
  3. 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.

    ResponderExcluir
  4. 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.

    ResponderExcluir
  5. Obrigado!

    Estava esperando por sua dica, me ajudou muito!

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

    ResponderExcluir
  7. 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!

    ResponderExcluir
  8. 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

    ResponderExcluir
  9. 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!

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

    ResponderExcluir
  11. 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.

    ResponderExcluir
  12. 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!

    ResponderExcluir
  13. 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!!

    ResponderExcluir
  14. 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

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

    ResponderExcluir
  16. 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

    ResponderExcluir
  17. 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

    ResponderExcluir
  18. 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!!

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

    ResponderExcluir
  20. 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

    ResponderExcluir
  21. 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!!

    ResponderExcluir
  22. 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 %

    ResponderExcluir
  23. 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.

    ResponderExcluir
  24. 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

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

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

    ResponderExcluir
  27. 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

    ResponderExcluir
  28. 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

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

    ResponderExcluir
  30. 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!

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


    < b:includable id='title'>

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

    ResponderExcluir
  32. 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.

    ResponderExcluir
  33. 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.

    ResponderExcluir
  34. 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!

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

    ResponderExcluir
  36. 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

    ResponderExcluir
  37. 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

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

    ResponderExcluir
  39. 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!

    ResponderExcluir
  40. 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

    ResponderExcluir
  41. 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

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

    ResponderExcluir
  43. 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

    ResponderExcluir
  44. 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?

    ResponderExcluir
  45. 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

    ResponderExcluir
  46. 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

    ResponderExcluir
  47. 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

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

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

    ResponderExcluir
  50. 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!

    ResponderExcluir
  51. 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

    ResponderExcluir
  52. 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

    ResponderExcluir
  53. 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;'/>

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

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

    passa no meu blog qualquer dia

    ResponderExcluir
  56. 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

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

    ResponderExcluir
  58. aqui no meu nem axou esse primeiro codigo

    " div id='header-wrapper' "


    deve ser diferente tb?

    abraços

    ResponderExcluir
  59. 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 ;)

    ResponderExcluir
  60. 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!!!

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

    Parabéns pelo post

    ResponderExcluir
  62. 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!

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

    ResponderExcluir
  64. 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.

    ResponderExcluir
  65. 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

    ResponderExcluir
  66. 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

    ResponderExcluir
  67. 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 "

    ResponderExcluir
  68. 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

    ResponderExcluir
  69. 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

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

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

    ResponderExcluir
  72. 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.

    ResponderExcluir
  73. 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!!!

    ResponderExcluir
  74. 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

    ResponderExcluir
  75. 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!

    ResponderExcluir
  76. 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.

    ResponderExcluir
  77. 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

    ResponderExcluir
  78. 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..

    ResponderExcluir
  79. 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/

    ResponderExcluir
  80. 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

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

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

    ResponderExcluir
  83. 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

    ResponderExcluir
  84. 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?

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

    ResponderExcluir
  86. 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

    ResponderExcluir
  87. 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

    ResponderExcluir
  88. 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.

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

    ResponderExcluir
  90. 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

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

    ResponderExcluir
  92. 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

    ResponderExcluir
  93. 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

    ResponderExcluir
  94. 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

    ResponderExcluir
  95. 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>

    ResponderExcluir
  96. 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...

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

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

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

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

    ResponderExcluir
  101. 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

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

    ResponderExcluir
  103. 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..

    ResponderExcluir
  104. 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

    ResponderExcluir
  105. 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.

    ResponderExcluir
  106. 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

    ResponderExcluir
  107. 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"

    ResponderExcluir
  108. 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?

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

    ResponderExcluir
  110. 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

    ResponderExcluir
  111. 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

    ResponderExcluir
  112. 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

    ResponderExcluir
  113. Cooke Berry

    veja aqui Separação entre as postagens do blog

    depois é só usar uma imagem no local indicado

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

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

    ResponderExcluir
  116. 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?

    ResponderExcluir
  117. 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;

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

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

    ResponderExcluir
  120. 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?

    ResponderExcluir
  121. 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

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

    ResponderExcluir
  123. 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...

    ResponderExcluir
  124. 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

    ResponderExcluir
  125. Guilherme Calvelli12 de outubro de 2011 22:09

    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.

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

    ResponderExcluir
  127. 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???

    ResponderExcluir
  128. @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

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

    Obrigado!

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

    ResponderExcluir
  131. @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

    ResponderExcluir
  132. 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!

    ResponderExcluir
  133. @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

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

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

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

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

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

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

    ResponderExcluir
  140. é 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>

    ResponderExcluir
  141. Ok. Vou tentar
    Brigadim mais uma vez!

    ResponderExcluir