Dividir Cabeçalho do Blogger em Dois – Design do Modelo

Como fazer duas colunas no cabeçalho do blog pode ser bem útil para tornar seu template mais interessante e aproveitar melhor o espaço da sua pagina. Já mostramos como fazer isso nos templates tradicionais do blogger: Como dividir o cabeçalho do blog em duas partes, mas faltou publicar uma atualização sobre como fazer nos templates novos do Design do Modelo.

Para fazer essa alteração entre na pagina editar html, mas antes de começar faça um backup do seu blog (salvar uma cópia do template), assim não perderá nada caso ocorra algum erro nas edições de html. Depois disso procure por:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

No trecho: maxwidgets='1' você deve mudar o numero 1 para 4 ou qualquer outra quantidade de gadgets que pretenda usar, ou simplesmente apagar esses códigos, assim o blogger não limitará o numero de gadgets neste setor.

Também troque a palavra 'no' por 'yes' neste trecho: showaddelement='no', isso faz mostrar o adicionar gadget.

Outra parte do html que precisamos mudar é Header1' locked='true' , trocando true por false, isso permitirá mudar o cabeçalho de lugar e arrastá-lo para dentro das colunas que vamos criar no cabeçalho do blog.

Agora encontre <div class='header-outer'>, apague e coloque esse código no lugar:
<div class='header-outer'>
<div id='header-left' style='width:50%; float: left; margin:0; '>
<b:section class='header-left' id='header-left' preferred='yes' style='float:left;'/>
</div>
<div id='header-right' style='width:50%; float: right; margin:0; '>
<b:section class='header-right' id='header-right' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>

Os valores width:50% são as larguras de cada coluna, você pode alterar como desejar, mas o quanto aumentar em uma deverá tirar da outra ou seja em vez de usar 50 e 50 pode usar 70 e 30.

Dividir Cabeçalho do Blogger

Leia também:

Designer de modelo - Layout e Configurações Avançadas
Mudanças no Painel do Blogger – Interface Atualizada
Porque os códigos não funcionam no blog

Depois isso é só salvar as alterações de html e entrar em elemento de pagina, onde poderá arrastar os gadgets para dentro das colunas do cabeçalho do seu blog ou adicionar gadgets diretamente nelas.

115 comentários :

  1. eu estava procurando isso... tentei o outro codigo antigo mas no template novo não deu certo

    agora fico 10!!!!

    ResponderExcluir
  2. ótimas as suas dicas,uma coisa que eu estou tentando fazer é encurtar as postagens,assim eu tenho visto em blogs que visito,as postagens reduzidas e no final,leia mais,se você poder me dar essa dica de como fazer,pô eu agradeço muito.

    ResponderExcluir
  3. birapcbira

    veja aqui: Fazer Resumo da Postagem com Miniaturas das Imagens

    e neste link tem outras opções para fazer o leia mais, então veja qual acha melhor ou mais facil usar...

    ResponderExcluir
  4. Eu gostaria de saber como mudar a cor da borda das imagens das postagens no blogspot.

    ResponderExcluir
  5. eu achei o tutorial bom, mas não temn nehuma imagem para ver como é que fica??

    ResponderExcluir
  6. Ben
    a imagem do meio da postagem mostrando a pagina layout é o resultado:

    http://www.dicasparablogs.com.br/2011/09/dividir-cabecalho-do-blogger-em-dois.html?ampliar=http://3.bp.blogspot.com/-LndXEdPa2us/Tm5Gg9y3bRI/AAAAAAAACqA/aBHWjBjRZrs/s1600/dividir-cabecalho-blogger.jpg

    mas a visualização do blog fica igual ao nosso, veja que a busca e o assinar feed estão ao lado do nome do blog no topo da pagina

    ResponderExcluir
  7. Eu queria sabe se da para colocar a imagem no espaço que fica divido e do lado as páginas, mas com que a imagem tomasse conta de todo o espaço e que não ficasse tanto no canto. Tem como?

    ResponderExcluir
  8. junto com o trecho header-right' style='width:50%; float: right; margin:0;

    você pode colocar o alinhamento ao centro, assim:

    header-right' style='width:50%; float: right; margin:0; ;text-align:center;'

    ResponderExcluir
  9. Belo... Isto mesmo que estava procurando valeu. Por compartilhar

    ResponderExcluir
  10. Tenho duas dúvidas:
    1º No meu blog (www.znloja.blogspot.com) o cabeçalho do lado esquerdo ficou desalinhado com as postagem. Como faço esse alinhamento?
    2º No cabeçalho da esquerda tentei colocar uma imagem com um link para um anunciante, mas quando ele é clicado dá erro (http://znloja.blogspot.com/www.flickr.com/photos/lojaheyyou). Como corrijo este endereço que o blogger está criando?
    Grato

    ResponderExcluir
  11. então deve ter apagado algum código errado.... esse tutorial não altera o linhamento

    ResponderExcluir
  12. Caro Fabiano, para que serve está linha de código? div style='clear:both;'

    ResponderExcluir
  13. Qndo eu faço isso e estou na parte final do código da erro : Mais de uma seção encontrada com o id: header-left. Os IDs de seção devem ser únicos e exclusivos.

    como faço para resolver isso?

    Obrigado

    ResponderExcluir
  14. Não consegui da erro sempre...

    ResponderExcluir
  15. deve estar errando algum detalhe no código... usando aspas em vez de '

    são muitos detalhes e qualquer letra fora do lugar dá erro

    ResponderExcluir
  16. Ebrahim
    deve ter deixado esse código duas vezes no seu html ou é um template diferente o que está usando e por isso dá erro

    ResponderExcluir
  17. Caiooo
    esse código "termina a divisão em colunas" ele faz uma linha inteira na pagina, por exemplo você criou duas colunas acima, colocar esse código permite que volte a ter apenas uma coluna

    ResponderExcluir
  18. Fabiano Roberto ,

    Meu template é baseado no simples olha ai http://julianocamargo.blogspot.com na verdade não é meu o blog mais o dono me pediu para dividir o cabeçalho.

    Obrigado

    ResponderExcluir
  19. Meu amigo, essa dica foi maravilhosa. Era tudo que precisava aprender para mudar a aparência do meu site. Obrigada

    ResponderExcluir
  20. Ebrahim
    para dividir colunas conheço dois codigos o deste tutorial, e aquele que está no link no inicio do texto

    ResponderExcluir
  21. nossa a um tempão que eu estava procurando isso e finalmente eu achei vlw ...

    ResponderExcluir
  22. Fabiano tou fazendo um blog do blogger de dawnload grátis porém sou iniciante!! vamos a minha dúvida! Vou botar várias banda é a pessoa q clicar em uma banda quero q apareça uma lista de musica da banda para dawnload MAIS COMO FAÇO ISSO??? já tenho todas musicas na minha conta do 4shared.Fabiano tou fazendo um blog do blogger de dawnload grátis porém sou iniciante!! vamos a minha dúvida! Vou botar várias banda é a pessoa q clicar em uma banda quero q apareça uma lista de musica da banda para dawnload MAIS COMO FAÇO ISSO??? já tenho todas musicas na minha conta do 4shared.

    ResponderExcluir
  23. LUCAS SILVA
    mostrar a lista de musicas tem que ser feito no seu blog... colocando o link para o download de cada uma delas

    ResponderExcluir
  24. O Blog de você é demais! Graças a vocês consigo editar qualquer template! *-*
    Vlw mesmo! tão de parabéns!!!! \o/

    ResponderExcluir
  25. Bem legal esse codigo pena que não posso colocar =[

    ResponderExcluir
  26. Guilherme Calvelli12 outubro, 2011 22:12

    PARABÉNS NOVAMENTE. Muito obrigado (:

    ResponderExcluir
  27. olha tem como vc axa ou se ja souber fazer um turturial de "opçao esanciva"

    descriçao: quando uma pessoa clicar em cima do nome de alguma coisa aparece todo conteudo sem sair da pagina, isto eu vi no site da abril falando sobre o enem

    ResponderExcluir
  28. Randromedo , você fala em abrir outra pagina ao clicar no seu blog... se for isso não tenho o código mas acho que não deveria usar... pode desagradar os seus visitantes...

    ResponderExcluir
  29. Olá Fabiano. Finalmente achei o que queria. Os códigos que eu estava procurando não batiam com o que eu tinha aqui.
    bom, li o que algumas pessoas escreveram e vi que uma delas tem o mesmo probl q eu.
    fiz o que você falou e ficou dividido, mas está fora de alinhamento com as postagens. está mais largo.
    Gostaria mt que me ajudasse.
    ainda estou aprendendo a mexer.
    QWualquer coisa me responda por e-mail
    keyjow@gmail.com
    obrigada


    karinna

    ResponderExcluir
  30. karinna
    tente fazer novamente..

    tenha cuidado com detalhes porque é ruim mexer com codigos as vezes um sinal faltando dá erro ou colocar o código no lugar errado...

    ResponderExcluir
  31. muito obrigado mim ajudou muito

    ResponderExcluir
  32. Legal !, sempre quiz fazer isso no meu blog

    ResponderExcluir
  33. mais eu quero dividir em 3! e no segundo código só tem pra 2!

    ResponderExcluir
  34. André Emerick
    seria necessário adpatar o código repetindo o trecho que acrescentei com outro nome... por exemplo, além do que está lá no tutorial colocar também:

    <div id='header-center' style='width:50%; float: right; margin:0; '>

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

    </div>

    mas altere o valor das porcentagens para 33 em todos os trechos ( a soma não pode passar de 100)

    ResponderExcluir
  35. Funcionou legal. Obrigado pela dica.

    Mas gostaria de saber mais uma coisa se possível.
    Meu blog tem 3 colunas, semelhante a seu. e uma borda azul (semelhante essa do seu blog), gostaria de saber como aumenta-la ou reduzi-la.
    E em cada coluna tem também um espaço antes de começar o gadget (coluna da esquerda e coluna da direita) e também um espaço na coluna do meio (área de postagens) próximo a coluna da direita, gostaria de saber como reduzir estes espaços.

    ResponderExcluir
  36. os espaços são os codigos padding e margin... então procure e reduza os valores...

    não tenho como dizer o lugar exato pois os templates variam muito

    ResponderExcluir
  37. ei amigo mim fala uma coisa como eu faço pra fazer esses pontinho também pra deixa o código dentro ? #Help

    ResponderExcluir
  38. não tem nada no lugar dos pontinhos... é só pra procurar por margin ou padding no html

    ResponderExcluir
  39. boa noite...parceiro...como eu instalo um novo gadget do lado direito no tamanho de 300x250 em meu blog?
    depois se da um olhada nesse blog de teste meu: http://tricolor-rj.blogspot.com/

    pode se notar que do lado direito tem 2 sidebar eu quero incluir mais 1 em baixo desse,só que maior e mais largo..como faço isso? abraços

    ResponderExcluir
  40. tipow esse aqui: http://1.bp.blogspot.com/_3eh_nW6DoIE/TOa-rP3EW-I/AAAAAAAABrw/_WiNeTah10w/s320/gadget-abaixo-do-cabe%25C3%25A7alho-3.jpg


    olha a imagem ae....abraços

    ResponderExcluir
  41. @Vitinho - TYF esse tipo de alteração é melhor entrar na pagina design do modelo, lá tem varias opções de layout inclusive esse que dividi a sidebar em duas.

    depois é só arrastar o gadget para o lugar que deseja

    ResponderExcluir
  42. mais no meu template nao da pra mudar o design do modelo...essa que divide em 2 jah tenho...eu quero adicionar o que fica com uma sidebar em baixo dessa dividida em 2...sabe como fazer?

    ResponderExcluir
  43. Ótimo artigo, consegui fazer no meu blog. Se puder ver meu blog e dá uma dica de melhora adoraria, oempregador.blogspot.com

    ResponderExcluir
  44. é dificil dizer o que modificar no seu blog, procure ver quais assuntos os seus visitantes mais gostam (mais comentarios, visitas, retweets)

    sobre o template tem que fazer testes e ver se muda alguma coisa, alguém comenta sobre a alteraçao, dá diferença nas visitas...

    ResponderExcluir
  45. No meu html nao tem !!
    Me ajude!!

    ResponderExcluir
  46. nem todos os templates são iguais mas precisa marcar a opção expandir modelo de widgets para achar

    ResponderExcluir
  47. @Fabiano Roberto

    O MEU NAO TEM ESSA TAG.. PAREI NESSE PROCEDIMENTO.. FIZ OS ANTERIORES, OQ FAÇO AGORA? OLHE AE WWW.ZINMUSIC.COM.BR

    div class='header-outer

    ResponderExcluir
  48. @ZinMusic seu template é bem modificado por isso nem todos os códigos conseguirá achar..
    mas procure por algo parecido com header-outer, por exemplo header-wrapper

    veja esse outro tutorial: Como dividir o cabeçalho do blog em duas partes, lá deve ser o código parecido com o seu

    ResponderExcluir
  49. Esse código não funciona no template Design do Modelo: Awesome Inc.
    O titulo do blog fica isolado a esquerda.
    Como resolver esse problema?

    ResponderExcluir
  50. estou usando esse código em meu outro blog: http://frasescurtas.com.br e funcionou.

    veja os detalhes as vezes na hora de alterar o código falta ou sobra algum sinal ; > ' < , ! "

    ResponderExcluir
  51. Muito Bomm Mais voce já recebeu tantas mensagens assim mais saiba que essa mensagem serve pra voce continuar a ajudar os outros de qualquer maneira
    até mesmo com os blogs dos mesmos!..
    Parabéns...

    ResponderExcluir
  52. Tem como fazer o mesmo com o rodapé? É que eu uso um template baixado na net, e eu queria poder separar o rodapé em 3 partes!

    PS.: Ótimo tutorial, há muito tempo sigo suas dicas, e cada vez me surpreendo mais, parabéns!

    ResponderExcluir
  53. @=\╣Mů|241|XP_ĸıŁŁĕŕ╠/= mexer em templates que baixou é complicado porque eles tem muitas tags diferentes.

    mas veja aqui: Dividir o rodapé do blog - Footer

    ResponderExcluir
  54. O tuto não serviu para mim, até mesmo esse de dividir o cabeçalho dá erro, pois até a identificação no meu template é diferente do indicado aqui, mesmo assim obrigado pela atenção, acho que esse é o preço de usar um template "exclusivo", rsrsrs! Abraços e boa sorte!

    ResponderExcluir
  55. realmente os tutoriais que achar geramente falam sobre como fazer isso em modelos padrão do blogger e não em templates alterados

    mas dependendo de qual conteudo for usar no rodape pode dividir o gadget com códigos html, veja aqui: Imagens Lado a Lado, Fazer Colunas nos Gadgets

    no post fala em imagens mas funciona com qualquer codigo html

    ResponderExcluir
  56. Eu estou tendo uma certa dificuldade em fazer algo e gostaria de saber como se faz para diminuir o espaço entre os gadgets. Pois eu coloquei um gadget imagem e logo abaixo um outro gadget de pesquisa mas a distância entre eles é grande. Tem como diminuir esse espaço?

    ResponderExcluir
  57. isso vai depender do seu template mas veja no seu html se tem algum estilo

    .widget{...} com valor alto de padding ou margin se não encontrar tente adicionar o estilo

    .widget{margin:0px}

    ResponderExcluir
  58. Deu certo, valeu mesmo continue com o excelente trabalho, é muito bom entrar em um blog como este e estar sempre aprendendo algo novo, um grande abraço Fabiano, valeu mesmo.

    ResponderExcluir
  59. Olá, na linha do tutorial acima, eu alterei "maxwidgets para 2" e "showaddelement para yes". Sendo assim, acima do cabeçalho foi criado um novo Gadget onde eu pretendo colocar uma mensagem de boas vindas. Minha dúvida é de como diminuir o espaço entre o novo Gadget e o Gadget do cabeçalho. Se alguém souber e puder me ajudar eu agradeço.

    Obrigado
    Márcio

    ResponderExcluir
  60. anonimo, o espaço é em algum estilo CSS no seu html.

    mas podem ser varios lugares que criam esse espaço vazio. procure por padding ou margin.

    veja aqui como Achar e Resolver Problemas com Códigos HTML no Blog

    ResponderExcluir
  61. fabiano, quero ter quatro divisões no cabeçalho, colocaria 25% no width ou 70% e 30% como falou(pq oq eu entendi que essa opção era para apenas duas vidisões, mas como coloquei 4. Então minha linha de raciocínio está correta?)

    ResponderExcluir
  62. Vinicius
    tente repetir esse trecho mais duas vezes

    <div id='header-right2' style='width:50%; float: right; margin:0; '>

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

    </div>

    apenas alterando a id header-right2 e a outra com header-right3.

    mas sugiro fazer com 24% primeiro para testar, talvez se usar 25 uma das colunas fique em baixo por causa de alguma margem no CSS

    ResponderExcluir
  63. Olá.. minha dúvida é sobre o cabeçalho do blog. Qualquer que seja a imagem que eu coloque no cabeçalho do meu blog,independente de ajustar o tamanho dela,sempre falta um espaço na largura dessa imagem, o qual eu preciso preencher com alguma cor para alcançar o tamanho das postagens
    que vem normalmente abaixo da pagina. Nos meus outros blog isso não acontece. Poderia me dar uma dica de como localizar este problema dentro do html? Se precisar visualizar o que eu exponho aqui, meu blog é www.cartasparamichael.blogspot.com
    (observe como preciso preencher a lateral direita da imagem com alguma cor..)
    Muito obrigada Rosane

    ResponderExcluir
  64. você poderia fazer uma borda na imagem em degrade para ela se misturar com a cor de fundo.

    mas se mandar uma imagem um pouco maior e desmarcar a opção ajustar deve ficar no tamanho certo

    ResponderExcluir
  65. tenho uma duvida por que no meu não tem Hearder1 só tem Hearder o que devo, fazer?Isso é normal?

    ResponderExcluir
  66. os códigos variam um pouco conforme o template, então precisa testar

    ResponderExcluir
  67. Eu fiz um blog que dá dicas para blogs e gostaria de postar está dica no meu blog mencionando que no seu site tem mais dicas e gostaria de pedir sua permissão para fazer isso isto espero sua resposta

    ResponderExcluir
  68. Reinaldo
    copiar conteudo é plagio. então não pode copiar.

    além disso o google está "caçando" quem copia conteudo de outros sites, portanto o melhor é escrever seus próprios textos

    ResponderExcluir
  69. tá serto muito obrigado pela dica. :D

    ResponderExcluir
  70. cara acho que todo mundo procurava isso, muito obrigado pela sua ajuda, valeu mesmo, continue nos ajudando. Meu blog ficou massa
    aêÊÊÊÊEÊÊÊÊ^!!!!!!!

    ResponderExcluir
  71. Obrigado suas dicas me ajudam muito e seu site também é d+

    ResponderExcluir
  72. No meu blog nao tem o trecho div class='header-outer'

    ResponderExcluir
  73. tem que expandir o modelo para achar esse trecho do código

    ResponderExcluir
  74. cara eu pus pra tres colunas e naum funciona nanhum gadget neste setor do cabeçalho. tento por fotos e naum vaitento por qualquer coisa e naum funfa. pq fabiano?

    o template é awesome.inc de tina chen

    ResponderExcluir
  75. tem que alterar os códigos e fazer testes até funcionar.

    e claro não pode repetir o nome dos estilos e id dos códigos

    ResponderExcluir
  76. essa alteração de html é meio complicado veja os detalhes...

    ResponderExcluir
  77. mas ja q eu fiz 3 colunas,uma delas terá q ser center né?

    ResponderExcluir
  78. não use o center.

    coloque float:left em duas colunas

    ResponderExcluir
  79. Eu usei, mas não ficou tão bom assim no meu template. Mais valeu a dica.


    http://fatointeressante.blogspot.com.br

    ResponderExcluir
  80. demaisssss...fiz tudo como vc mandou, fui em editar layout e estava la...tudo divididinho...maravilha, obrigadissima!!!!

    ResponderExcluir
  81. VÔ FAZER UMA PERGUNTA SOBRE OUTRO ASSUNTO
    TEM COMO TIRAR O NOME (EDITAR)DE UM DETERMINADO GADJET NO LAYORT DO BLOG?

    ResponderExcluir
  82. LAZARO DA SILVA CARDOSO normalmente esses gadget que tem a palavra editar é só para indicar o lugar você deve alterar.

    entre na pagina layout e clique para editar o gadget

    ResponderExcluir
  83. OBG.POR RESPONDER Fabiano Roberto SEU BLOG TA DE PARABÉNS E TEM AJUDADO MUITA JENTE

    ResponderExcluir
  84. esso foi muito util para min mais voce pode me dar uma dica de como faser com que minhas postagens apareca apenas uma imagem e quando eu clicar ir para a postagem como nesse blog www.jogosmrp.net

    ResponderExcluir
  85. Finalmente consegui encontrar um tutorial que realmente desse resultado. meus parabéns pelo tuto e muito obrigado, ajudou há muitas pessoas..

    ResponderExcluir
  86. Não encontrei no meu blog Header1' locked='true'

    ResponderExcluir
  87. Daniel procure apenas por Header

    o html varia um pouco conforme o template

    ResponderExcluir
  88. era exatamente isso que eu estava procurando para colocar uma caixa de busca ao lado do header, valeu cara!

    ResponderExcluir
  89. Bem no meu site, a logo fica no canto e a publicidade do Adsence la no alto, como que eu alinho??

    ResponderExcluir
  90. anonimo você pode alterar as larguras que configurou nas colunas do cabeçalho.

    ou pode colocar o código center no anuncio do adsense para centralizar, assim:

    < center > código do adsense < / center >

    ResponderExcluir
  91. Olá,
    não estou conseguindo dividir em 3 partes.
    com o eu faço.
    tenho algumas duvidas com meu blog.
    o modelo dele tem um espaçamento entre os gadgets q gostaria de retirar.
    vc sabe como?

    obrigado!!

    ResponderExcluir
  92. João dividir o cabeçalho em 3 partes exige algumas adaptações dos códigos como usar duas vezes o código da segunda parte criando um novo nome para a terceira parte..

    sobre o espaçamento entre os gadget podem ser varios códigos então precisaria fazer testes para achar onde está o espaço (pode ser margin ou padding) veja aqui:

    Achar e Resolver Problemas com Códigos HTML no Blog

    ResponderExcluir
  93. Fabiano,
    Muito obrigado, consegui resolver alguns problemas!

    ResponderExcluir
  94. Oi, Fabiano. Eu gostaria de fazer o contrário. Baixei um template que já é dividido em 2 partes, mas eu gostaria de deixar em uma só. Como faz o processo inverso?

    ResponderExcluir
  95. Muriel Angel templates prontos são bem complicados de mexer.

    não é possivel adicionar gadget antes ou depois da divisão da sidebar? ou editar na pagina modelo > design?

    ResponderExcluir
  96. Acabei de fazer aqui, bem simples e rápido. Valeu Fabiano.

    ResponderExcluir
  97. Fabiano, eu tentei localizar "" para começar a tarefa de dividir o cabeçalho, mas esta linha simplesmente não foi localizada no blog. Nem a linha que indicastes lá na outra postagem. O que devo fazer?

    ResponderExcluir
  98. Esquece o que comentei antes.. foi bobeira minha, localizei o "Header 1" e então apareceu a linha que precisava. Fiz a modificação e deu certo!

    ResponderExcluir
  99. isso acontece muito ... um detalhe qualquer dá o maior trabalho.

    ResponderExcluir
  100. Parabéns foi o unico tutorial de todos que eu pesquisei que deu certo

    ResponderExcluir
  101. Preciso de uma ajuda de quem entende do blog tenho dois blog abri-os com um e-mail, mais agora com a unificação da conta Google esta havendo uma mistura dos blog e o goocle criou outro e-mail do Gmail quando quero abri um blog agre em nome do ourro. O que faço para separar os doisblog

    ResponderExcluir
    Respostas
    1. não há problema em ter dois ou mais blogs na mesma conta de email.

      Mas você pode transferir o blog para outro email, veja aqui:
      http://www.dicasparablogs.com.br/2013/08/autor-administrador-blog.html

      Excluir