Colunas no Rodapé do Blogger + Template

O tutorial mais pedido pelos leitores compulsivos vai finalmente ser atendido. Hoje vou mostrar como colocar duas colunas no rodapé do seu blogue no Blogspot.

Antes de começar, os avisos paroquiais: Essas configurações são um pouco complicadas e demandam certo conhecimento em códigos HTML e CSS. Por precaução tente antes num blogue de testes e faça o backup do seu template antes de começar.

Cansei de ouvir gente choramingando com o template quebrado dizendo que foi culpa minha, mas não usou um blogue de testes e nem fez backup. Já vou avisando que casos assim nem publico mais o comentário! Se vire!

Foi usado o template Minima, padrão do Blogger como exemplo, se você usa um template diferente ou personalizado as configurações podem variar bastante.

Dito isso, vamos começar com o rodapé (footer) em duas colunas, ideal para templates estreitos, com apenas uma coluna na barra laretal.

O que vamos fazer é localizar todos os trechos de código originais relativos ao rodapé, tanto no CSS como no HTML, e substituí-los pelos códigos compulsivos personalizados. Portanto todos os elementos do rodapé, caso existam, serão perdidos.


1 - Localizar e substituir o código CSS:
O primeiro passo é localizar o código CSS. Entre na edição do seu template, NÃO marque Expandir modelos de widgets e procure (Ctrl + F) pelo seguinte trecho:

/* 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 tudo pelo seguinte código:

/* Footer em colunas by UsuárioCompulsivo
----------------------------------------------- */
#footer-wrapper{clear:both;width:100%;}
.footer-column{text-align:left;margin:0;width:48%;}
.footer-bottom{text-align:center;padding:10px;}

2 - Localizar e substituir o código HTML:
Agora vamos fazer o mesmo com o trecho de código referente ao HTML, localize:

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

E substitua tudo por:

<div id='footer-wrapper'>
<div class='footer-column' style='float: left;'>
<b:section id='footer-left' preferred='yes'/>
</div>
<div class='footer-column' style='float: right;'>
<b:section id='footer-right' preferred='yes'/>
</div>
<div style='clear:both;'/>
<div class='footer'>
<b:section id='footer-botom' preferred='yes'/>
</div>
</div> <!-- end footer-wrapper -->

Visualize para testar, se não ocorrer nenhum erro salve e seu rodapé em duas colunas estará pronto! Agora é só incluir os elementos de página que você desejar, nos novos locais disponíveis:

E o resultado:

+ Template pronto para Download
Para os mais preguiçosos ocupados, segue o link para download do template Minima Padrão do Blogger, com a customização compulsiva para o rodapé em duas colunas já aplicada. Não retire os créditos!

Minima Compulsivo Rodapé 2 Colunas

©2008 UsuárioCompulsivo - Alguns direitos reservados ;-)

P.S.: Aguardem, em breve o tutorial e o template pronto para download, com o rodapé em três colunas!

Imagem do cabeçalho: Chiara Marra