Header Vanessa S.
Dividir Header em 2 colunas no Designer de modelo
Eu já publiquei um artigo onde eu ensino a Dividir Header em colunas, só que aquele tutorial não se aplica aos templates novos do Blogger, o Designer de modelo.
Estes novo templates do Blogger tem a opção de dividir as colunas da sidebar e footer diretamente pelo painel do blogger, sem a necessidade de inserção de códigos, porém, não tem a opção de dividirmos o Header (cabeçalho) em colunas.
Pensando nos usuários que utilizam estes modelos novos de templates e se deparam com a dificuldade de dividir a header do blog, eu andei fazendo alguns testes a fim de desvendar um pouco mais os códigos destes templates novos e descobri uma maneira de dividir o Header em 2 colunas, nos templates designers de modelo.
É uma ótima opção, para quem quer incluir um banner do adsense ao lado do cabeçalho, por exemplo, ou até mesmo, uma caixa de busca.
Hoje vou mostrar como dividir o Header em 2 colunas nos templates Designer de modelo.
A primeira coisa a fazer, é um backup do seu template para evitar transtornos, caso algo saia errado.
1º passo:
Ajuste o tamanho da fonte do seu cabeçalho.
Entre na aba “designer de modelo” e clique no modo “avançado“.
Clique em “titulo do blog” e ajuste para um valor menor (20,24 ou 30px, depende do modelo que você estiver usando).
2º passo:
Procure por:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
onde está maxwidgets=’1‘- troque por maxwidgets=’5‘.
onde está showaddelement=’no‘ – troque por showaddelement=’yes‘.
Agora na linha logo abaixo do trecho que você acabou de localizar, procure por:
Header1' locked='true
Onde está escrito true – troque por false.
3º passo:
Agora arraste o gadget do cabeçalho, deslocando-o para outro lugar, como a sidebar ou o footer, por exemplo, para que possamos trabalhar na inclusão das colunas.
4º passo:
Volte no modo “editar html” e procure por:
<div class='header-outer'>
Substitua por:
<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;'/>
Salve!
Entre na aba “elementos de página“.
Notem que acima do gadget “Páginas” apareceu uma coluna, precisamos retirá-la dali para evitar que desconfigure o cabeçalho.
Precisamos localizar novamente aquele código do 2º passo, só que desta vez faremos o inverso.
5º passo:
Procure por:
<b:section class='header' id='header' maxwidgets='5' showaddelement='yes'/>
onde está maxwidgets=’5‘- troque por maxwidgets=’1‘.
onde está showaddelement=’yes‘ – troque por showaddelement=’no‘
Salve!
Volte na aba “elementos de página” e veja se a coluna foi excluída, devendo ficar assim:
Aplicando estilos às colunas:
Agora se desejar você pode aplicar estilos ás colunas do header que acabou de dividir.
Volte na “edição HTML” do seu template e procure pelo trecho CSS referente ao header.
Tente localizar por:
/* Header
e cole logo ABAIXO deste trecho, o código CSS para aplicar estilos:
#header-right{
margin: auto;
padding: auto;
}
#header-left{
margin: auto;
padding: auto;
}
Defina os estilos de acordo com os elementos que você adicionar às colunas (feed, caixa de busca, menu, banner, etc).
Se quiser, arraste o gadget Cabeçalho do blog para o Header, posicionando-o em uma das colunas que você dividiu.
Caso queira diminuir a largura de alguma das colunas, ajuste o valor de “width:50%” do código constante no 4º passo.
Lembrando que você deverá sempre somar os valores tomando cuidado para não ultrapassar o limite de largura total.
Dica: Você pode, por exemplo, estipular “width:70%” para a “header-left”, e “width:30%” para a coluna header-right.
Ajuste da maneira que você preferir.
Veja o resultado:
E para chegar a este resultado, eu fiz vários testes a fim de desvendar um pouco mais os códigos destes templates novos.
Se não der certo com você, com certeza é porque você deve ter feito algo errado, ou já houve alguma modificação nesta área do seu template, portanto refaça o tutorial, teste e: mãos á obra!
Muito Obrigado! Eu achei o Máximo! Nossa… Amei… Deu tudo certinho… Acabei de tentar em outro blog de dicas e não consegui… E aqui até agora tudo acontece! adoooro! Eu quero saber como coloca esse tipo de caixa para comentário de seu blog… Beijos.
muito adorei fico bom no ne site
Adorei este hack. Eu passei a adoptar o designer de modelo do blog. Porém ele não é tão customizável assim.
Eu gostaria de saber como remover os fundos padrão das linhas de topo no neste designer. Refiro-me ao template black do Espetacular Ltda., template este que aprecio por ser preto e permitir não perder muito do aspeto do meu template anterior, trazendo o que de melhor têm estes novos templates.
As novas funcionalidades sociais estão diretamente disponíveis.
Será que tem um jeito de tirar essa cor de fundo nas linhas de topo? No rodapé eu consegui através da personalização mas ficou ainda uma linha. Se souberes de um jeito podias falar sobre isso no blog. Seria fantástico. Desde já obrigada.
Muito bom seu tutorial.
Já testei e deu certinho!!!!
Parabéns
Show de bola fiquei dias procurando e tentando fazer até encontrar a dica do Mundo Blogger, e deu super certo.
Só não consegui incluir abaixo do header deu erro será por que:#header-right{margin: auto;padding: auto;}#header-left{margin: auto;padding: auto;}
Obrigada, Clau, notei que nos elementos de página, as duas colunas não estavam alinhadas como na sua imagem, mas ao visualizar o blog, estava certinhas. Muito obrigada mesmo.
Infelizmente no código no template do meu blog não existe o código DO 4º PASSO do tutorial. Eu estou usando o template do Dicas Blogger. Se puder me ajudar eu te agradeço.
Galera, muito bom o tutorial, funcionou comigo perfeitamente no Mozzila e no Chrome. Só um adendo, rsrs, no IE 9, a segunda coluna sempre aparece abaixo da primeira, ou seja, o header-left fica posicionado acima e o header-right abaixo. Eu não inseri os estilos CSS indicados, mas resolvi o problema alterando a largura do header-right para width:49%; deixando o header-left width:50%, totalizando 99%. Acho que assim o IE não reconhece como "quebra". Espero que seja útil, obrigado pela ajuda de vcs!
Olá Amigos preciso realmente comentar pois faz uns uns 3 a 4 meses que resolvi montar um blog para divulgar minha ideias e personalizar meu trabalho e com a s dicas deste blog eu consegui fazer tudo que eu queria. Da uma olhada: http://pre-lancamentosrj.blogspot.com/
Ah! Me desculpe e me perdoe se estou lotando a sua caixa de entrada, mas esqueci a coisa mais importante. Esqueci de dizer Obrigado.
Fazia um tempão que eu estava procurando a dica pra dividir o cabeçalho em colunas. Obrigado, mesmo!!!
Deu certo! Que maravilha!
Eu só precisei colocar o código do 4º passo no lugar certo e funcionou direitinho. Pulei os primeiros passos. Acho que falta a tag de fechamento (/DIV) no final do código, não??
AEEEE depois de umas dez tentativas, na 11ª deu certo.
O meu problema? Estava tentando fazer no novo painel do Blogger in Draft, e não dava certo de jeito nenhum. Aí quando voltei ao Blogger normal, na primeira tentativa, funcionou.
Fica aí a dica ^^
E, Clau = ? amo teu blog.
Obrigada por todos os ótimos tutoriais daqui.
Olá querida, como sempre arrasou !!! Passos muito bem explicados e fáceis de seguir ! Já coloquei no meu blog de testes, ainda não passei pro meu blog, mas deu certo.
Tive o mesmo problema que alguns relataram da imagem ficar desalinhada à esquerda porque uso um modelo onde a barra superior ocupa toda a página. O que eu fiz foi adaptar a imagem, coloquei nela uma barra a mais do lado esquerdo, na cor do fundo, "empurrando" assim a figura para a direita até ficar alinhada, pois tentei mexer no código e não adiantou.
Agora está perfeito, vou decidir o que colocar à direita e logo coloco no ar no meu blog 😉
Obrigada !!
Show de post, deu certinho aqui, pra eu que estou começando nesse ramo é mão na roda =) vlw
Obrigado…
ficou ótimo.
Garota você é retada! Bem no estilo Baiano. Admiro mulher bonita e inteligente obrigado pelo post. já coloquei no meu blog.
Você é craque. Obrigado!
Nossa você não tem noção do o quanto eu estou grata. Fiquei simplismente o dia inteiro tentando fazer isso, procurei em tudo o que é site e só esse seu tutorial que funcionou. Parabéns e muito sucesso pra você! =)
Clau é com satisafação que venho parabenizar-lhe pelo seu blog que é direcioando a ajudar-nos a melhorar o design do blog, seu tutorial sobre dividir o header em 2 colunas me foi muito util,pois precisava adicionar uma apresentação de slaides no cabeçario e isso antes era impossivel , e dividido-o puder fazer exatamente o cabeçario como queria. entre e dê uma olhada pra ver o resultado , fico grato pela força . Att : Franco
———————————–
e uma duvida se voce puder me ajudar : após a mudança da head em 2 colunas , apareceu um afastamento entre o cabeçario e o menu paginas do blog, antes o menu de paginas ficavam coladinhas no cabeçario,entrando lá voce observará, gostaria de saber o que faço para deixar como antes, o menu de paginas coladinho com o cabeçario, obrigado desde já.
————————————————–
se desejar adicione o msn : ciber.27@hotmail.com (projeto ver de trem)
Olá.
Consegui fazer. O problema é que o cabeçalho foi parar colado no canto esquerdo e o gadget colado no canto direito.
Tem como arrumar?
Ótimo tutorial.
Achei que esse seria o único que funcionaria… Mas…
Deu erro.
Não entendi o passo 4:
"Substitua…"
Sibstituir o que exatamente?
Excelente!! Me ajudou muito, mesmo!!
Obrigada!
beleza a unica que funcionou foi a da clau a unica
eu ja tentei em eutros blog nas o unico jeito que consegui foi o seu
Como se divide em quatro? pode ajudar?
gostei mesmo da explicação, mas eu queria em 4:(
sua dica é interessante, porém eu uso um blogger um modele da minima, odeio esse novos modelos, são muito práticos, fáceis de personalizar, os modelos da minima só são alterados pelo codigo fonte.
Enzo,
Nerdzbook
Fico feliz que tenham gostado e mais feliz ainda pelos comentários e pelo retorno. Obrigada!
Parabéns! Otimo post! Me ajudou muito…
Procurei por umas duas horas, só achava post's ensinando dividir nos modelos antigos, e os codigos eram diferentes.
O seu me salvou ;D
Nossa meu,muito muito muito obrigado mesmo,tava a dias procurando por isso nos novos modelos 😀 vlw vlw vlw (l)
http://www.bombadigitall.blogspot.com
Luciana
Fico feliz que tenha dado certo. Obrigada pelo comentário 😉
Clau, ótima dica, há tempos quero fazer isso no meu blog e todos os tutorias que leio não dão certo. O seu funcionou perfeitamente! Obrigada!
Gislaine,
Luhenun
Conforme já falei anteriormente, alguns recursos variam de template para template. Notem que alguns leitores não tiveram problemas. Não há como eu saber o que ocorre no template de vcs. Sendo assim, não tenho como ajudar.
Aconteceu um erro,
Funcionou certinho no IE e Chrome, mas no Firefox a Navbar ficou apenas na coluna direita, queria saber se pode me ajudar.
Aqui está o blog, abre ele no Firefox: http://investirdinheiro.net
Clau, eu fiz, deu certo mas não ficam alinhados, sabe?? Não ficam na mesma reta!!! Será que vc pode dar uma olhada neste blog: http://material-extra.blogspot.com/ e ensinar como faz pra fazer a Cbox ficar no meio do cabeçalho?? Obrigado!
Demais, está muito bem explicado e concigui fazer!
Filipi,
Pedro
Isso não aconteceu no blog onde fiz o teste. Tais recursos variam de template para template. Sendo assim, não tenho como ajudar.
Adminin
Obrigada.
Vc sao Otimos Muito Bem Explicado Valeu mesmo
Clau, o tutorial fuincionou muito bem, mas adicionei um gadget html com um buscador, mas ele fica no topo do heather, como eu faço para que ele fique centralizado verticalmente?
Gostei do tutorial, mas não funcionou totalmente aqui.
A coluna da esquerda não se alinha com o resto do template, e fica grudado com a borda da tela. Tentei alterar o margin-left, mas quando fiz isso, a coluna da direita foi para baixo na janela elementos da página e dá erro ao salvar.
Poderia me ajudar?
Autor
Valeu pela informação! 😉
Renata
Obrigada pelo comentário!
Oi Clau,
Este foi, simplesmente, o melhor, mais completo e didático tutorial sobre o assunto que encontrei. Meus parabéns!
Deu certíssimo, só não testei no IE, tenho até medo de tentar (hehe…)
Parcialmente resolvido. Bom, na vdd fiz uma gambiarra, mas só para não ficar tão feio qto antes no IE.
Vamos lá. Logo após eu fazer este tutorial, a imagem do header fica alinhada totalmente a esquerda de qquer navegador. A solução q eu achei foi usar como Imagem do header via o Cabeçalho do blogger em Design, uma imagem PNG toda transparente, 500×106.
A imagem exibida no meu cabeçalho, na vdd é o Backgroud que eu refiz! Gambiarra hehe, mas ficou redondinho, exceto no IEca (sic) rsrs. No IE parece q ele determinou um valor fixo para a altura do meu Header. Tentei add um Height:106px; porém o msm só funcionou p/ os outros navegadores (p/ variar).
Por hora, o que eu fiz foi aumentar a altura da imagem p/ 136px, valor que eu encontrei pelo paint a partir de um printscreen. O BG ficou certinho IE, apesar de ter ficado estranho, está menos feio que as barras brancas. Se alguém precisar, o BackGroud fica com sua altura centralizada no header. Se o template for no mesmo esquema que o meu, procure por
.header-outer { algumas linhas aqui }
e troque por
.header-outer {
margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
background-repeat: no-repeat;
background-position: center;
background-image: url("http://xxxxxx.png");
}
Não esquecendo de usar como imagem do cabeçalho uma totalmente transparente!
Tá bem zuado… mas por hora, pra amezinar com os 40% q tem acesso via IE, vai assim mesmo.
Abraços
Ok Clau, obrigado.
Com o tempo vou ver se resolvo isso na tentativa e erro.
Eu achando a solução deixo aqui para o pessoal ver comofas 😀
Abraços
Jeferson
Autor
Lamento, mas não terei como ajudar. O IEca sempre é um problema! Para tentar descobrir alguma solução requer testes e tempo, coisas que atualmente estou sem! Vc terá que testar, tente ajustar medidas em margin e padding, ou tente diminuir o tamanho da coluna. É uma sugestão.
Olá.
Muito bom este post. Foi o único que efetivamente deu certo!
O único problema foi que, no IE, o banner que coloquei ficou desalinhado. No FF e Chrome está perfeito! Tentei de tudo já, dentro do que eu sei. Se vc tiver alguma sugestão, ficarei muito grato.
http://www.bonsdescontos.com
Jeferson
bollanet.blogspot.com
Que bom!
Obrigada pelo comentário.
aaaaaleluia
aaaaaleluia
caramba, já tinha visto uns 10 tipos de como fazer isso, e tinha 3x mais coisas pra fazer…detalhe; nenhum deu certo antes desse
muito muito MUITO obrigado mesmo
jessica
Vc já tentou diminuir a largura de alguma das colunas?
Tenta ajustar o valor de "width:50%" do código constante no 4º passo. Vc não pode esquecer o fato de q vc pode estar usando uma imagem grande demais q esteja ultrapassando a largura total do seu template.
Clau eu fiz tudo que vc falou no tutorial, e deu certo coloquei o cabeçalho e um banner 468×60, mas o meu problema é o mesmo da Bia. o blog visto em uma resolução de tela grande, fica alinhado ao centro e somente o cabeçalho fica a esquerda prejudicando o visual, poderia me ajudar. Muito obg
Poxa… eu queria muito fazer isso…
Mas eu não consegui achar de modo algum essa linha q vc pediu para achar…
cheguei até a selecionar ' expandir modelos de widgets '
Mas não adiantou… não consegui achar de jeito nenhum essa linha …
jessica
Este tutorial serve para dividir o cabeçalho com algum outro elemento. Pro cabeçalho ficar alinhado a esquerda direitinho ele tem que ter outro elemento a direita. E tb é necessário que vc ajuste o tamanho da fonte.
ola, o meu template é um dos modelos básicos do blogger, tentei fazer, deu certo mas o cabeçalho ficou isolado na esquerda em vez de seguir o alinhamento da pagina, o que fazer ?
parabens, sempre procurei um tutorial assim para esse modelo de template, muito obrigado 🙂
Edu Rodrigues
Mas pra dividir o Footer no designer de modelo não precisava nada disso…esses modelos possuem a facilidade de dividir o footer e a sidebar em colunas diretamente pelo painel do blogger. É só ir na aba Designer de modelo >>layout e escolher e salvar.
de qualquer forma, fico feliz q tenha dado certo ai, e obrigada pelo comentário. Volte sempre 😉
Clau, Precisava dividir a FOOTER de um blog meu que usa o Designer de modelo. Como não achei nada a respeito na internet… Resolvi utilizar esse seu metodo, modificando ele de HEADER para FOOTER.
Consegui perfeitamente! até dividi-la em 3 partes.
Muito obrigado ((:
e fica a dica se você quiser postar ai para seus leitores. Valeu!!
Muito obrigado pela ajuda!!
parabéns (:
Bia,
Ogub@s
Este tutorial é para dividir o cabeçalho em 2 colunas e usar o header próprio e padrão do designer de modelo.
Para ser sincera, este templates são umas "nhacas" em matéria de personalização. Apesar de terem facilitado a divisão da sidebar e do fotter, eu não recomendo a utilização destes modelos para os usuários que querem personalizar mais o template. É muito melhor usar os modelos antigos (mínima), eles são bem melhores para personalizar que estes.
muito massa, deu uma força legal…
mas queria saber se tem como eu deixar as duas div's e por a imagem do meu cabeçalho de fundo
Oi Clau, tudo bem?
Olha o meu deu certinho ficou lindo, mas só deu um coisinha:
se vc visualizar a página na resolução 1280×768 o blog fica no meio e o cabeçalho (onde eu coloco a imagem do topo) fica na esquerda.
Você sabe como resolver isso?
Se souber e puder me dizer te agradeço muito.
bjus
Rodrigo
Vc pode inserir qtos elementos quiser dentro de cada coluna que foi criada no cabeçalho.
Sobre os links no menu,vou dar uma olhada e qualquer coisa eu publico aqui.
Igor Harmendani,
Aldo Brandao
Que bom que deu certo.Obrigada pelos comentários.
Realmente… Acho vários tutoriais na net, mas só alguém como nós, um "Fuçador" que não é WebDesigner para entender o que precisamos…. Ótimas Dicas…! Parábens!
Único tutorial que deu certo comigo! Depois de meses de procura, finalmente achei um que funcionasse.
Obrigado, e continue assim!!!
Justamente o que eu estava procurando. Muito bom mesmo, parabéns!!
Uma coisa, será que vc consegue desenvolver um código desses para adicinar mais espaços divididos para gadgts abaixo do cabeçalho como neste tutorial?
Uma outra coisa: gostaria muito de saber se é possível editar os links daqueles menus prontos que vem lá designer de modelo.
Abraço.
Desordeiro,
Bauru
Que bom que deu certo ai com vcs! E obrigada pelos comentários 😉
Vim apenas dizer, Clau, que ficou perfeito. Funcionou no modelo que estou customizando…rs. Valeu!
Nath Gótica
Se vc não fez um backup do seu template antes de efetuar a mudança, lamento lhe informar , mas vc perdeu tudo sim!
Por isso que é sempre importante fazer um backup do modelo que está usando antes de fazer qualquer alteração ou realizar quaisquer instalações.
Como que faço para recuperar todas atualizaçãoes do meu blog…mudei para o novo template e depois mudei para o modelo clássico…aí sumiu as minhas imagens e gifs…será que tem algum jeito…por favor me ajude…será que perdi???
Estou muito chateada…não pensei que eu fosse ter problemas!!!
Beijão
Justamente oque eu procurava
muito bom mesmo Clau
Não tenho palavras para descrever o quanto seus tutoriais ja me ajudaram
Clau, era exatamente isso que eu queria… estou parado com as mexidas nos templates, mas basta eu me animar com a blogagem que voltarei. Já favoritei aqui. Muito bom. Adoro seus super-didáticos tutoriais.
Netto
Que bom!
Obrigada pelo comentário. Volte sempre!
Sensacional!
Parabéns, adoro posts inteligentes!