Mas para começar a divisão do footer em 3 partes o primeiro passo é entrar na pagina editar html (não clique para expandir o modelo), mas antes de começar é bom fazer um backup do blog para não perder nada no caso de imprevistos. Agora que não corremos mais o risco de estragar nada vamos começar.
Procure por esse trecho no html do seu blog (está quase no final):
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
Quando achar apague, tome cuidado para não tirar ou deixar nenhum sinal no inicio ou fim do código e coloque esse no lugar:
<div id='footer-wrapper'>
<div id='footer-column-container'>
<div id='footer-column-left' style='float:left; width: 32%;margin: 2px;'>
<b:section class='footer-column' id='footer2' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div id='footer-column-center' style='float:left; width: 32%;margin: 2px'>
<b:section class='footer-column' id='footer3' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div id='footer-column-right' style='float:right; width: 32%;'>
<b:section class='footer-column' id='footer4' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div style='clear:both;'/>
<div id='footer-bottom'>
<b:section class='footer' id='footer-column-bottom' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div style='clear:both;'/>
</div></div>
<div style='clear:both;'/>
E já está tudo pronto, agora é só entrar na pagina layout e arrastar os gadgets para cada uma das colunas do rodapé do seu blog e assim usar melhor o espaço disponível.
Se a parte do rodapé ficar sem cor de fundo podemos colocar esse código:
#footer-wrapper{background-color: #ffff66;border: 1px solid #0000FF}
junto com os outros estilos CSS do blog, isso fica no começo do html. É fácil de achar porque no blog tem muitos códigos parecidos com esse. Para trocar a cor é só mudar o final ffff66, veja aqui o código de outras cores. E as bordas você pode ver nosso tutorial sobre colocar e alterar bordas que tem explicações detalhadas.
Note que neste código que colocamos apareceu 3 vezes width: 32%; isso é a largura de cada uma das colunas no rodapé do blog, portanto altere os valores como desejar, mas claro que a soma das 3 chegar até 100% provalemente uma das colunas passará para linha debaixo, então se tiver esse problema é só reduzir um dos valores (sempre é bom deixar algum espaço sobrando).
50 comentários:
Olá Fabiano, achei a dica fácil e bem util...já vou testar e depois volto para dizer se deu certinho mesmo.
Até já...
Queria saber como faço para adicionar uma coluna no template????
Prontinho! Fiz as modificações usando meu blog testes, deu certinho! Parabéns pelo blog e obrigada por sempre nos ajudar!
Até...
O fabiano roberto, valeu mano, agora eu tou com um problema no meu navegador... ele naum quer mostrar as colunas corretamente! vo ter que reinstalar o pc! mas parabéns, é mais fácil do que tantos tutos que eu vi ai!
Muito obrigada! Deu certinho. Só queria saber como colocar uma cor de fundo?
Obrigada
Mariza
Emanoel
eu não sei o que houve, mas recentemente a pagina layout do blogger está mesmo fora de lugar, até semana passada estava tudo certo, agora alguns de meus blog as colunas aparecem uma embaixo da outra, mas o blog continua no modelo correto.
a algum tempo eu tem
ntei fazer isso mas não deu certo.
agora vou testar
valeu pela dica
pois é fabiano, agora preciso fazer uma modificação no meu blog e não tá dando certo... que ódio; e virei fan do seu blog, to enviando pra meus amigos ;)
não encontrei o trecho citado no código, em meu template.
Emanoel
tente fazer novamente, geralmente os problemas acontecem por algum detalhe nos códigos, as vezes uma letra a mais ou faltando não deixa funcionar.
SERJAO_O_MARMANJJUS
se o seu template é modificado ou baixou da internet talvez use outras tags, então fica dificil usar essa dica.
tente procurar somente por footer-wrapper e veja se acha algo parecido com aquilo que indicamos no tutorial
tentei a sua outra dica, mas na hora de salvar, dá erro.
vou deixar assim mesmo pra não correr o risco de fazer alguma bobagem.
obrigado pela atenção.
com certeza vou continuar de olho nas suas dicas.
AE FABIANO ROBERTO, O BLOGGER VOLTOU AO NORMAL, AS COLUNAS DEU CERTO. VLW AI HEIM, PARABÈNS, ÓTIMO BLOG.
Não encontrei algo que pudesse me ajudar com minha dúvida. Quero um lay xml, mas nao consigo mudar as imagens, as coisas, como eu faço isso?
O FABIANO, não é anuciando, mas olha porque ficou preto no meu blog ai;;; por favor.
http://detonandogta.blogspot.com/
se quiser excluir esse comentário exclui, mas olha e me diz.
Emanoel
falou colocar o estilo content-wrapper, veja em nosso tutorial
Zinha Santos
depende de quais imagens quer trocar, mas de modo geral para alterar o template entre na pagina editar html e procure por background url(....) aqui terá o endereço de uma imagem então é só trocar por outra, veja aqui como hospedar imagens
http://www.dicasparablogs.com.br/2008/12/hospedagem-de-imagens.html
se tiver duvidas sobre qual é a imagem copie o endereço que está no seu template e coloque no navegador para ver a imagem antes de trocar.
nao entedi direito nao achei nao
fans do pokemon oficial
se baixou seu template de algum site ele pode usar tags diferentes, então fica mais complicado saber onde modificar
obrigadao pessoal funcionou mesmo!
pessoal tenho uma duvida é k eu tive de baixar um template para ter duas barars laterais e agora eu nao sei mudare as cores por o editor de cores por favor me ajudem!
joka
alguns templates que você baixa não funciona bem a pagina cores e fontes, veja aqui como corrigir isso
http://www.dicasparablogs.com.br/2009/06/pagina-cores-e-fontes.html
mas vai dar um pouco de trabalho
Oi, Fabiano!
Como deixar a fonte e a cor dos títulos do rodapé triplo iguais aos da sidebar?
Obrigada e Feliz Natal para ti!
Aline Girão, no estilo #footer-wrapper pode colocar as formatações de texto
http://www.dicasparablogs.com.br/2009/04/como-formatar-o-texto-do-blog.html
ola eu qeeria saber como colocar foto no rodape vc sabe ? obg
duda
blog da duda
entre na pagina layout, clique para adicionar um gadget no rodapé, se não der pode adicionar na coluna do blog e depois arrastar
nos gadgets tem um para enviar imagens
Não onsigo dividir o rodapé. Oque eu faço ?
tente fazer novamente prestando atenção nos detalhes na hora de copiar e colar os códigos.
as vezes um letra faltando ou sobrando não deixa o código funcionar
Tem como fazer isso no "Add gadget" que aparece logo abaixo do cabeçalho? dividindo-o em duas ou tres partes?
Paulo Ferreira, veja aqui como dividir o cabeçalho do blog
http://www.dicasparablogs.com.br/2009/10/como-dividir-o-cabecalho-do-blog-em.html
Olá,
Sei q este post não tem relação com minha dúvida q é a seguinte:
Eu gostaria de colocar aquela espécie de apresentação de slides mas que contenha os posts recentes ou posts escolhidos por mim.
É como aquele q tem no Baixaki e também tem nesse site para vc entender melhor: www.baixatudogames.com .
Gostaria muito de colocar akela apresentação de posts que tem no início. Poderia me ajudar?
Desde já agradeço, abçs .
Boa dica, valew !
Bloguer Vinícius
vou preparar um tutorial sobre isso
Ok, fico no aguardo !
Obgd !
MUITO OBRIGADO SUA DICA ME AJUDOU MUTIO...
Ola, no meu blog tinha muita coisa depois de Foot wrapper... wrapper... eu apaguei e coloquei o texto indicado acima no seu post, so que nao consegui salvar nem visualizar o blog, dava mensagem de erro dizendo que "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 "".
nao entendi o que eu deu errado, mas nao consegui colocar as 3 colunas.... alguem podem me ajudar
bjs obrigada, Sue
Sue
provavelmente você apagou algum trecho além do que deveria ou teve algum erro na hora de colocar os códigos, mudar o numero de colunas é mesmo uma coisa chata de fazer qualquer letra a mais ou faltando dá erro.
Muito grata,mais uma vez tudo certo!Genial suas dicas.
muito boa dica ja coloqui no meu ficou show
Ótimo!! obrigada! deu tudo certo.
Eu sei que você sabe, mas quero reafirmar, o seu trabalho é muito importante.
Oi! Obrigado pela dica, era isso que estava precisando. Funcionou no meu blog de testes, apenas o código era diferente, estava <div id='footer'<, mas colocou o código acima deste.
abs
Não consigo achar o código no meu "editar html" para trocar pelo que você falou...Pode me ajudar???
precisa clicar para expandir o modelo para visualizar esses códigos. mas talvez não seja exatamente igual, isso pode variar conforme o modelo do blog
Nunca imaginei que fosse tão fácil! rs
Ótima postagem!
Oi Fabiano + uma vez aqui o problema é que não consigo achar esse tal código já expandi as widgets e não acho o unico código que acho com esse tal de footer é:
<b:section class='foot' id='footer-3...
mas o que vc diz eu não acho de jeito nenhum me ajude por favor
abraços
Cristiani
esses códigos variam um pouco conforme o modelo de template, procure por footer, acho que todos usam isso.
Oi Fabiano sei que não é o lugar certo para fazer essa pergunta mais é que estou com outro probleminha básico kkkkk
Estou com um espaço muito grande entre as duas primeiras postagens fica parecendo que tinha uma postagem mais ela está oculta o restante fica bem direitinho como faço para deixar com o mesmo espaço?
abraços
você incluiu anuncios do adsense entre as postagens, mas não sei por qual motivo não está aparecendo.
entre na pagina designer, clique para editar as postagens e desmarque mostrar anuncios, veja aqui: Como usar o Gerar Receita no Blogspot
Fabiano, como faço para deixar as 3 colunas com a mesma distancia? Nossa, já tentei de tudo e não consegui, me ajuda por favor!
Garota Antenada
você quer dizer mesma largura? é só usar width em 33% nas 3 colunas.
pode também colocar text-align: center; no código, assim:
<div id='footer-column-left' style='float:left;text-align: center; width: 32%;margin: 2px;'>
mas nas tem que fazer nas 3 colunas
Eu já tinha tentado isso antes e também não deu certo. Na verdade a coluna do meio é que não se ajusta. Já a da direita da um espaço bem maior que a configuração. Pelo que eu percebi nos comentários acima quase todos tem essa mesma dúvida minha. Será que seria possível passar um código para agente com os ajustes já configurado? rs
Se puder é claro!
Obrigada!
não sei o que houve, em todos os testes que fiz as colunas ficaram iguais já que usei 32% de largura em cada uma delas, ou seja para completar os 100% com as 3 colunas faltará pouco, então a diferennça será minima.
mas se usar os modelos novos(designer do modelo) pode trocar isso diretamente por aquela pagina
Mas o (designer de modelo) não faz efeito no meu blog, não sei pq mas só consigo formata-lo no html. Tem outra solução a não ser essa?
Postar um comentário