12 de agosto de 2009

Como colocar três colunas no rodapé do Blogger


Às vezes, nos deparamos com templates que não possuem um rodapé (Footer) e a ausência desse recuso limita locais que poderiamos utilizar para adicionar novas gadgets. Às vezes, encontramos templates com o rodapé, mas só que sem divisão, o que também não ajuda. Neste post iremos aprender como dividir o rodapé do template em três colunas.

Vamos utilizar o Template Minima do Blogger como nossa "cobaia". Por padrão, ele é configurado conforme a figura abaixo.


O que iremos fazer será adicionar logo abaixo da seção destinada as postagens do blog, um rodapé (footer) dividido em três colunas. Para isso, vamos fazer o seguinte:

1 - Faça um backup do seu template atual. Se você ainda não sabe como fazer isso, basta clicar aqui.

2 - Agora vá em Layout -> Editar HTML (Não é necessário Selecionar a opção "Expandir modelos de widgets"). Com a ajuda de Crtl+F encontre o código CSS referente ao rodapé (Footer). No Minima é este que está logo abaixo:

/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;

Substitua todo esse código que está logo abaixo:

/* Footer
----------------------------------------------- */
#footer-column-container {
clear:both;
}
.footer-column {
padding: 0px;
}

3 - Novamente com a ajuda do Crtl+F encontre o código.

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

4 - Substitua o trecho <b:section class='footer' id='footer'/> pelo código abaixo.
<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>

5 - Visualize e, se tudo estiver certo, salve.


Como podem ver na figura acima, existem três colunas no rodápe do template.

É isso. Até a próxima.

9 comentários:

  1. E como faço para colocar mais uma barra lateral? Rs

    Muito bem explicado este post! Obrigada!

    Beijocas! =)

    ResponderExcluir
  2. Ola, Sara. Tudo bem com você?

    Primeiramente obrigado pelas palavras.

    Quanto a dividir a sidebar aqui no blog ainda não tenho um post sobre isso, mas vou te indicar duas ótimas opções:

    Como dividir a Sidebar em Colunas, Excelente post feito pela Rô Zanchetta do Bloggersphera

    Nueva sidebar dividida en dos (em espanhol) da Rosa María do excelente blog El Escaparate de Rosa

    Os tutoriais são relativamente fáceis, mas se você tiver alguma dificuldade, pode me contactar que eu te ajudo.

    Vou pegar carona na sua dúvida e daqui uns dias público um post relacionado a este problema. ;)

    Grande abraço!

    ResponderExcluir
  3. Obrigada pelas dicas, viu? E por tudo! Rs

    Vou estudar direitinho e praticar no "teste" antes..Rs
    E se tiver qualquer dúvida, te chamo! Obrigada!

    Abraço!!

    ResponderExcluir
  4. Fiz no Blog teste e deu certíssimo! Agora.. Vou aplicar no meu Blog. Rsss.

    Obrigada!
    Abraço!

    ResponderExcluir
  5. Valeu pelo tutorial, chegou em boa hora! Já estou usando. xD

    ResponderExcluir
  6. Bom... Mais uma vez, obrigadaa! Ficou show! E a explicação não poderia ser melhor!

    Abraço!

    ResponderExcluir
  7. Muito bom trabalho, esse post ficou dez

    muito obrigado.
    confiram meu blog depois deste post
    http://megadigitalbahia.blogspot.com
    um forte abraço

    ResponderExcluir
  8. Obrigado pelo tutoral. Sucesso.

    ResponderExcluir
  9. Obrigado pelo belo post.
    Testei e funciona.

    ResponderExcluir

LEIA AS REGRAS COM MUITA ATENÇÃO:

- Seu comentário precisa ter relação com o assunto do post;
- Não inclua links desnecessários no conteúdo do seu comentário;
- Se quiser deixar sua URL, comente usando a opção OpenID;
- Comentários com CAIXA ALTA, miguxês ou erros de ortografia não serão aceitos;
- Ofensas pessoais, ameaças e xingamentos não são permitidos.