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.
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.
eu estava procurando isso... tentei o outro codigo antigo mas no template novo não deu certo
ResponderExcluiragora fico 10!!!!
ó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.
ResponderExcluirbirapcbira
ResponderExcluirveja 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...
Eu gostaria de saber como mudar a cor da borda das imagens das postagens no blogspot.
ResponderExcluirVitor
ResponderExcluirveja aqui: Colocar bordas nas imagens do blog
eu achei o tutorial bom, mas não temn nehuma imagem para ver como é que fica??
ResponderExcluirBen
ResponderExcluira 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
a tha entedi hehe
ResponderExcluirEu 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?
ResponderExcluirjunto com o trecho header-right' style='width:50%; float: right; margin:0;
ResponderExcluirvocê pode colocar o alinhamento ao centro, assim:
header-right' style='width:50%; float: right; margin:0; ;text-align:center;'
Belo... Isto mesmo que estava procurando valeu. Por compartilhar
ResponderExcluirTenho duas dúvidas:
ResponderExcluir1º 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
então deve ter apagado algum código errado.... esse tutorial não altera o linhamento
ResponderExcluirCaro Fabiano, para que serve está linha de código? div style='clear:both;'
ResponderExcluirQndo 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.
ResponderExcluircomo faço para resolver isso?
Obrigado
Não consegui da erro sempre...
ResponderExcluirdeve estar errando algum detalhe no código... usando aspas em vez de '
ResponderExcluirsão muitos detalhes e qualquer letra fora do lugar dá erro
Ebrahim
ResponderExcluirdeve ter deixado esse código duas vezes no seu html ou é um template diferente o que está usando e por isso dá erro
Caiooo
ResponderExcluiresse 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
Fabiano Roberto ,
ResponderExcluirMeu 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
Meu amigo, essa dica foi maravilhosa. Era tudo que precisava aprender para mudar a aparência do meu site. Obrigada
ResponderExcluirEbrahim
ResponderExcluirpara dividir colunas conheço dois codigos o deste tutorial, e aquele que está no link no inicio do texto
nossa a um tempão que eu estava procurando isso e finalmente eu achei vlw ...
ResponderExcluirFabiano 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.
ResponderExcluirLUCAS SILVA
ResponderExcluirmostrar a lista de musicas tem que ser feito no seu blog... colocando o link para o download de cada uma delas
O Blog de você é demais! Graças a vocês consigo editar qualquer template! *-*
ResponderExcluirVlw mesmo! tão de parabéns!!!! \o/
Bem legal esse codigo pena que não posso colocar =[
ResponderExcluirPARABÉNS NOVAMENTE. Muito obrigado (:
ResponderExcluirolha tem como vc axa ou se ja souber fazer um turturial de "opçao esanciva"
ResponderExcluirdescriç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
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...
ResponderExcluirOlá Fabiano. Finalmente achei o que queria. Os códigos que eu estava procurando não batiam com o que eu tinha aqui.
ResponderExcluirbom, 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
karinna
ResponderExcluirtente 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...
muito obrigado mim ajudou muito
ResponderExcluirLegal !, sempre quiz fazer isso no meu blog
ResponderExcluirmais eu quero dividir em 3! e no segundo código só tem pra 2!
ResponderExcluirAndré Emerick
ResponderExcluirseria 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)
Funcionou legal. Obrigado pela dica.
ResponderExcluirMas 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.
os espaços são os codigos padding e margin... então procure e reduza os valores...
ResponderExcluirnão tenho como dizer o lugar exato pois os templates variam muito
Muito Obrigado!!!
ResponderExcluirei amigo mim fala uma coisa como eu faço pra fazer esses pontinho também pra deixa o código dentro ? #Help
ResponderExcluirnão tem nada no lugar dos pontinhos... é só pra procurar por margin ou padding no html
ResponderExcluirboa noite...parceiro...como eu instalo um novo gadget do lado direito no tamanho de 300x250 em meu blog?
ResponderExcluirdepois 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
tipow esse aqui: http://1.bp.blogspot.com/_3eh_nW6DoIE/TOa-rP3EW-I/AAAAAAAABrw/_WiNeTah10w/s320/gadget-abaixo-do-cabe%25C3%25A7alho-3.jpg
ResponderExcluirolha a imagem ae....abraços
@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.
ResponderExcluirdepois é só arrastar o gadget para o lugar que deseja
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@Vitinho - TYF veja aqui Como dividir a sidebar em duas
ResponderExcluirmuito bom! parabéns DPB
ResponderExcluirÓtimo artigo, consegui fazer no meu blog. Se puder ver meu blog e dá uma dica de melhora adoraria, oempregador.blogspot.com
ResponderExcluiré dificil dizer o que modificar no seu blog, procure ver quais assuntos os seus visitantes mais gostam (mais comentarios, visitas, retweets)
ResponderExcluirsobre o template tem que fazer testes e ver se muda alguma coisa, alguém comenta sobre a alteraçao, dá diferença nas visitas...
No meu html nao tem !!
ResponderExcluirMe ajude!!
nem todos os templates são iguais mas precisa marcar a opção expandir modelo de widgets para achar
ResponderExcluir@Fabiano Roberto
ResponderExcluirO 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
@ZinMusic seu template é bem modificado por isso nem todos os códigos conseguirá achar..
ResponderExcluirmas 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
ficou óootemo!
ResponderExcluirEsse código não funciona no template Design do Modelo: Awesome Inc.
ResponderExcluirO titulo do blog fica isolado a esquerda.
Como resolver esse problema?
estou usando esse código em meu outro blog: http://frasescurtas.com.br e funcionou.
ResponderExcluirveja os detalhes as vezes na hora de alterar o código falta ou sobra algum sinal ; > ' < , ! "
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
ResponderExcluiraté mesmo com os blogs dos mesmos!..
Parabéns...
@HabboHabbid obrigado pelos elogios
ResponderExcluirTem 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!
ResponderExcluirPS.: Ótimo tutorial, há muito tempo sigo suas dicas, e cada vez me surpreendo mais, parabéns!
@=\╣Mů|241|XP_ĸıŁŁĕŕ╠/= mexer em templates que baixou é complicado porque eles tem muitas tags diferentes.
ResponderExcluirmas veja aqui: Dividir o rodapé do blog - Footer
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!
ResponderExcluirrealmente os tutoriais que achar geramente falam sobre como fazer isso em modelos padrão do blogger e não em templates alterados
ResponderExcluirmas 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
Obrigado mesmo, ajudou muito!
ResponderExcluirEu 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?
ResponderExcluirisso vai depender do seu template mas veja no seu html se tem algum estilo
ResponderExcluir.widget{...} com valor alto de padding ou margin se não encontrar tente adicionar o estilo
.widget{margin:0px}
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.
ResponderExcluirOlá, 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.
ResponderExcluirObrigado
Márcio
anonimo, o espaço é em algum estilo CSS no seu html.
ResponderExcluirmas 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
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?)
ResponderExcluirVinicius
ResponderExcluirtente 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
Valeu , amei ,deu super certo !
ResponderExcluirBeijo !
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
ResponderExcluirque 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
você poderia fazer uma borda na imagem em degrade para ela se misturar com a cor de fundo.
ResponderExcluirmas se mandar uma imagem um pouco maior e desmarcar a opção ajustar deve ficar no tamanho certo
Eu agradeço pelas sugestões.
ResponderExcluirtenho uma duvida por que no meu não tem Hearder1 só tem Hearder o que devo, fazer?Isso é normal?
ResponderExcluiros códigos variam um pouco conforme o template, então precisa testar
ResponderExcluirEu 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
ResponderExcluirReinaldo
ResponderExcluircopiar 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
tá serto muito obrigado pela dica. :D
ResponderExcluircara acho que todo mundo procurava isso, muito obrigado pela sua ajuda, valeu mesmo, continue nos ajudando. Meu blog ficou massa
ResponderExcluiraêÊÊÊÊEÊÊÊÊ^!!!!!!!
Obrigado suas dicas me ajudam muito e seu site também é d+
ResponderExcluirNo meu blog nao tem o trecho div class='header-outer'
ResponderExcluirtem que expandir o modelo para achar esse trecho do código
ResponderExcluircara 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?
ResponderExcluiro template é awesome.inc de tina chen
tem que alterar os códigos e fazer testes até funcionar.
ResponderExcluire claro não pode repetir o nome dos estilos e id dos códigos
mas eu alterei tudo o que pedia
ResponderExcluiressa alteração de html é meio complicado veja os detalhes...
ResponderExcluirmas ja q eu fiz 3 colunas,uma delas terá q ser center né?
ResponderExcluirnão use o center.
ResponderExcluircoloque float:left em duas colunas
Eu usei, mas não ficou tão bom assim no meu template. Mais valeu a dica.
ResponderExcluirhttp://fatointeressante.blogspot.com.br
demaisssss...fiz tudo como vc mandou, fui em editar layout e estava la...tudo divididinho...maravilha, obrigadissima!!!!
ResponderExcluirVÔ FAZER UMA PERGUNTA SOBRE OUTRO ASSUNTO
ResponderExcluirTEM COMO TIRAR O NOME (EDITAR)DE UM DETERMINADO GADJET NO LAYORT DO BLOG?
LAZARO DA SILVA CARDOSO normalmente esses gadget que tem a palavra editar é só para indicar o lugar você deve alterar.
ResponderExcluirentre na pagina layout e clique para editar o gadget
OBG.POR RESPONDER Fabiano Roberto SEU BLOG TA DE PARABÉNS E TEM AJUDADO MUITA JENTE
ResponderExcluiresso 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
ResponderExcluirFinalmente consegui encontrar um tutorial que realmente desse resultado. meus parabéns pelo tuto e muito obrigado, ajudou há muitas pessoas..
ResponderExcluirNão encontrei no meu blog Header1' locked='true'
ResponderExcluirDaniel procure apenas por Header
ResponderExcluiro html varia um pouco conforme o template
era exatamente isso que eu estava procurando para colocar uma caixa de busca ao lado do header, valeu cara!
ResponderExcluirShow de bola!
ResponderExcluirBem no meu site, a logo fica no canto e a publicidade do Adsence la no alto, como que eu alinho??
ResponderExcluiranonimo você pode alterar as larguras que configurou nas colunas do cabeçalho.
ResponderExcluirou pode colocar o código center no anuncio do adsense para centralizar, assim:
< center > código do adsense < / center >
Olá,
ResponderExcluirnã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!!
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..
ResponderExcluirsobre 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
Fabiano,
ResponderExcluirMuito obrigado, consegui resolver alguns problemas!
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?
ResponderExcluirMuriel Angel templates prontos são bem complicados de mexer.
ResponderExcluirnão é possivel adicionar gadget antes ou depois da divisão da sidebar? ou editar na pagina modelo > design?
Acabei de fazer aqui, bem simples e rápido. Valeu Fabiano.
ResponderExcluiro melhor post do assunto!!
ResponderExcluirFabiano, 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?
ResponderExcluirEsquece 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!
ResponderExcluirisso acontece muito ... um detalhe qualquer dá o maior trabalho.
ResponderExcluirParabéns foi o unico tutorial de todos que eu pesquisei que deu certo
ResponderExcluirPreciso 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
ResponderExcluirnão há problema em ter dois ou mais blogs na mesma conta de email.
ExcluirMas você pode transferir o blog para outro email, veja aqui:
http://www.dicasparablogs.com.br/2013/08/autor-administrador-blog.html