07/11/2009

Dividir o rodapé do blog - Footer

Dividir o rodapé do blogspot (footer do blog) é mais fácil do que parece, basta trocar algumas linhas de códigos e pronto. Sugerimos que antes de começar entre na pagina layout e remova tudo que tiver no rodapé do blog, você não precisa excluir apenas arrasta para a coluna do blog ou embaixo das postagens, pois em poucos minutos vamos colocá-los no lugar novamente.


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).
Related Posts with Thumbnails

87 comentários:

  1. Olá Fabiano, achei a dica fácil e bem util...já vou testar e depois volto para dizer se deu certinho mesmo.
    Até já...

    ResponderExcluir
  2. Queria saber como faço para adicionar uma coluna no template????

    ResponderExcluir
  3. Prontinho! Fiz as modificações usando meu blog testes, deu certinho! Parabéns pelo blog e obrigada por sempre nos ajudar!
    Até...

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

    ResponderExcluir
  5. Muito obrigada! Deu certinho. Só queria saber como colocar uma cor de fundo?

    Obrigada

    Mariza

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

    ResponderExcluir
  7. a algum tempo eu tem
    ntei fazer isso mas não deu certo.
    agora vou testar

    valeu pela dica

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

    ResponderExcluir
  9. não encontrei o trecho citado no código, em meu template.

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

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

    ResponderExcluir
  12. AE FABIANO ROBERTO, O BLOGGER VOLTOU AO NORMAL, AS COLUNAS DEU CERTO. VLW AI HEIM, PARABÈNS, ÓTIMO BLOG.

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

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

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

    ResponderExcluir
  16. fans do pokemon oficial
    se baixou seu template de algum site ele pode usar tags diferentes, então fica mais complicado saber onde modificar

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

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

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

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

    ResponderExcluir
  21. ola eu qeeria saber como colocar foto no rodape vc sabe ? obg
    duda

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

    ResponderExcluir
  23. Não onsigo dividir o rodapé. Oque eu faço ?

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

    ResponderExcluir
  25. Tem como fazer isso no "Add gadget" que aparece logo abaixo do cabeçalho? dividindo-o em duas ou tres partes?

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

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

    ResponderExcluir
  28. Bloguer Vinícius
    vou preparar um tutorial sobre isso

    ResponderExcluir
  29. MUITO OBRIGADO SUA DICA ME AJUDOU MUTIO...

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

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

    ResponderExcluir
  32. Muito grata,mais uma vez tudo certo!Genial suas dicas.

    ResponderExcluir
  33. muito boa dica ja coloqui no meu ficou show

    ResponderExcluir
  34. Ótimo!! obrigada! deu tudo certo.
    Eu sei que você sabe, mas quero reafirmar, o seu trabalho é muito importante.

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

    ResponderExcluir
  36. Não consigo achar o código no meu "editar html" para trocar pelo que você falou...Pode me ajudar???

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

    ResponderExcluir
  38. Nunca imaginei que fosse tão fácil! rs

    Ótima postagem!

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

    ResponderExcluir
  40. Cristiani
    esses códigos variam um pouco conforme o modelo de template, procure por footer, acho que todos usam isso.

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

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

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

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

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

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

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

    ResponderExcluir
  48. Olá, não conseguir achar o codigo para excluir, o que fazer?

    ResponderExcluir
  49. infelizmente alguns templates são diferentes, mas você usa um template novo, então na pagina designer do modelo você pode dividir o rodapé

    ResponderExcluir
  50. Não querendo ser chato a dica e otima mais em vez de 32% tem que ser 33% o numero mais próximo de 100% que linha corretamente os Gadgets só quero melhorar um pouquinho só

    ResponderExcluir
  51. sim, poderia ser 33, mas é sempre bom deixar alguma sobra no caso da coluna ter margens...

    em alguns templates se usar 33 embora a soma seja menos que 100 não vai dar certo uma das colunas vai para baixo, por isso demos o exemplo com 32

    ResponderExcluir
  52. o roda pe do meu computador foi para lateral como faço para colocalo no lugar

    ResponderExcluir
  53. se não for possivel arrastar na pagina designer fica complicado dizer como corrigir porque tem que procurar o erro no html do seu blog, talvez seja mais fácil trocar o template

    ResponderExcluir
  54. é possivel por isto em baixo vc sabe né sul agredeço se for responder !!!!

    ResponderExcluir
  55. aaaaaaaaa deu certo muito obrigado

    ResponderExcluir
  56. eu tive que fazer um monte de coisa la por que meu template tinha um widget que não dava para excluir dai eu excluir em html XD

    ResponderExcluir
  57. Fabiano, como posso alterar a fonte do meu footer?

    Abraço!

    ResponderExcluir
  58. deu certo... mas sumiu a imagem do footer do background, poderia me ajudar? o template é o minima black.

    ResponderExcluir
  59. Dommi
    tem que ver onde está a imagem no seu html, deve colocar no footer-wrapper

    ResponderExcluir
  60. como mudar a cor dos links do footer

    ResponderExcluir
  61. a cor dos links é no estilo #footer-wrapper a{...}

    ResponderExcluir
  62. Não consegui =/ não achei a primeira coisa que era pra procurar =/

    ResponderExcluir
  63. usei a sua dica no meu blog, coloquei um post sobre o assunto e referenciei o Dicas para blogs.
    Achei outros códigos, mas pelo que vi este é o mais simples

    ResponderExcluir
  64. Fabiano eu baixei um Template da internet, e o roda pé já veio dividido em 4 partes, eu queria saber como faço pra fazer outro mas tudo junto?

    e como faço pra colocar o botão do AddThis igual o seu, rolando com a página?

    ah Fabiano a 1ª vez que entrei no seu blog eu li em alguns comentários que voce tinha dado uma entrevista (ou eu me enguanei?) me passa o link da entrevista.

    ResponderExcluir
  65. Rosiel T.S.
    sobre alterar o template é complicado pois como baixou ele deve ter tags proprias o que pode gerar erros na hora de alterar, seria necessario fazer testes diretamente na sua pagina quando fosse alterar o html.... então não posso ajudar nisto.

    Já dei entrevistas para alguns blogueiros que enviaram perguntas por email e eles publicaram no blog deles... mas nunca falei deste assunto aqui no dicas para blogs.

    sobre o addthis no canto da pagina como usamos, vou publicar um tutorial sobre isso, provavelmente sexta-feira (15/07/2011), diversas pessoas perguntaram.

    ResponderExcluir
  66. Será que poderia me ajudar? Gostaria de diminuir a altura do rodapé, como faço? Obrigada.

    ResponderExcluir
  67. Adriana
    a altura do rodapé depende do conteudo dele, veja se no CSS tem margin ou padding com valor alto no trecho #footer... ou algo parecido com isso (varia conforme o template)

    ResponderExcluir
  68. Ótima dica Fabiano. Mas só que os links que eu coloco no rodapé ficavam com uma bolinha preta do lado e o link azul, enquanto se eu colocar link na sidebar não tem bolinha, o link é da mesma cor do texto e em baixo tem uma linha pontilhada. Como façao para que os links do rodapé fiquem com o mesmo padrão dos links da sidebar?

    ResponderExcluir
  69. Fique Sabendo!
    a diferença acontece por causa das configurações de CSS (formatação), veja esse trecho tem a formatação dos links da sidebar

    .sidebar li {
    line-height:1.8em;
    list-style-type:none;
    border-bottom:1px dotted #999999;
    margin:0;
    padding:0;
    }
    #sidebar1 a,#sidebar2 a,#sidebar3 a,#sidebar4 a {
    color:#4c4c4c;
    text-decoration:none;
    }
    #sidebar1 a:hover,#sidebar2 a:hover,#sidebar3 a:hover,#sidebar4 a:hover {
    text-decoration:none;
    color:#2D8930;
    }
    #sidebar1 a:visited,#sidebar2 a:visited,#sidebar3 a:visited,#sidebar4 a:visited {
    text-decoration:none;
    color:#4c4c4c;
    }

    e o rodapé usa o estilo #footer-wrapper

    então precisa criar algo parecido com esse da sidebar para o rodape, isso aqui já deve retirar as bolinhas

    .footer li {
    line-height:1.8em;
    list-style-type:none;
    border-bottom:1px dotted #999999;
    margin:0;
    padding:0;
    }

    ResponderExcluir
  70. Gostaria de saber como diminuir a altura do rodapé.

    ResponderExcluir
  71. @Matheus geralmente a altura depende do conteudo do footer.

    ResponderExcluir
  72. Eu não acho esse termo:

    d='footer-wrapper
    section class='footer' id='footer


    e agora?

    ResponderExcluir
  73. isso varia conforme o template tente procurar por:
    < footer >

    < div class='footer-outer' >

    < div class='footer-cap-top cap-top' >

    mas se usar os modelos novos é só entrar na pagina desing do modelo >> layout e lá tem como dividir o rodapé

    ResponderExcluir
  74. Yo Fabiano, estou com um probleminha mas que já me causou uma dor de cabeça enorme. Estou tentando colocar uma imagem como plano de fundo do rodapé do meu blog, e a imagem é maior que o rodapé, para que cubra todo o fundo, mas o blogger corta um pedaço dela e não deixa a imagem aparecer completamente, já tentei um monte de código mas nada funciona, eis a formatação css que estou usando:

    . footer - inner {
    background - image: url (http://lh6.googleusercontent.com/-oeKjH7G5lbE/T0vy7fnZwBI/AAAAAAAAA1w/43_B1pigYb4/s0/fundofinal.png) ;
    background - position: center bottom ;
    background - repeat: no-repeat ;
    width:1360px ;
    height:120px ;
    }

    Preciso fazer e posicionar a imagem completa, sabe resolver?

    ResponderExcluir
  75. o seu blog tem 1360 de largura? se não tiver não adianta colocar isso no footer porque ele está dentro do conteudo do blog.

    acho que deveria reduzir a imagem ou cordar e tirar um pedaço do branco que está no meio.

    ResponderExcluir
  76. Fabiano
    Visite o http://dona-sinha.blogspot.com, alterei o template todo (madkassar) com as suas orientações. Aprendi tudo com as Dicas.
    Muito obrigada

    ResponderExcluir
  77. Oi Fabiano
    Já me sinto de casa
    Fiz algumas alterações no Dona Sinhá segundo as orientações desta página e ficaram maravilhosas.
    Mais uma vez Obrigadâo.
    Ig.

    ResponderExcluir
  78. < footer >

    < div class='footer-outer' >

    < div class='footer-cap-top cap-top' >
    Isso eu encontrei!! mas coloca aonde o código, (substituir por qual linha? por favor
    Aguaradando!!

    ResponderExcluir
  79. Consegui pelas suas dicas a cima percebi que tinha que mudar no personalizar e lá tem as 3 colunas!!

    ResponderExcluir
  80. procure somente por footer-

    porque isso varia um pouco conforme o template, mas também é possível dividir o rodapé na pagina designer do modelo

    ResponderExcluir