Blog Verde

Este post tem como objetivo explicar, dentre várias maneiras, uma bem simples de adicionar colunas igualmente espaçadas em seu footer.

Você terá a liberdade de acrescentar o que quiser às colunas, leia este excelente post e descubra como é possível melhorar a navegabilidade do seu blog utilizando o footer. Repare que grandes blogs, ao quais posso citar o John e o Darren, utilizam esta parte com informações adicionais aos leitores.

No Brasil, até pouco tempo atrás poucos utilizavam o footer para algo útil, quase sempre apareciam só as considerações finais de tema e copyright. O nM por exemplo passou a utilizar o footer para algo interessante somente com o novo layout, antes aquele espaço era pouco aproveitado…

Vamos lá, primeiro adicione as linhas seguintes ao seu stylesheet:


!--adicionando colunas footer--!
#footercolumns {padding:2em 0 0 10%; }
#footercolumns .block {float:left; width:30%; margin:0 0 0 2.5%; text-align:left;}
#footercolumns .first, * html #footercolumns .first{clear:both; margin:0; text-align:justify;}

Agora copie e cole as linhas seguintes ao seu footer (antes da tag </body>):

<div id="footercolumns">
<div class="inside">
<div class="block first">
<h3>Primeira coluna</h3>
<ul>
<li>texto 1</li>
<li>mais um texto</li>
<li>outro texto</li>
</ul>
</div>
<div class="block">
<h3>Segunda coluna</h3>
<ul>
<li>texto 1</li>
<li>mais um texto</li>
<li>outro texto</li>
</ul>
</div>
<div class="block">
<h3>terceira coluna</h3>
<ul>
<li>texto 1</li>
<li>mais um texto</li>
<li>outro texto</li>
</ul>
</div>
</div>
</div>
<br clear="all" />

O resultado será um footer como este: