Na semana passada andei lendo algumas coisas e deparei-me com um artigo no Blog Verde ensinando a criar um footer de 3 colunas. Resolvi então aproveitar parte da ideia e começar a trabalhar num footer de 3 colunas para o meu blog Fique-Rico. O processo tem como objectivo criar três colunas invisíveis no footer do seu blog, que passam a ser administradas individualmente.
Há quem utilize o footer do blog para colocar os créditos e informação demais, mas há também quem o utilize (como eu) para colocar artigos populares ou informação de redes sociais.
Este é o aspecto geral do footer que criei lá no blog. Na coluna do lado esquerdo coloquei alguma Navegação que considero importante. No espaço do meio coloquei artigos populares que defini manualmente, e na coluna da direita coloquei um widget do MyBlogLog, com os leitores que passaram recentemente pelo blog.
Para começar, vamos abrir o CSS (stylesheet.css) e colocar no fim dele as seguintes linhas:
!–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;}
Eu não mexi ainda neste código CSS porque não senti necessidade, mas existem alguns parâmetros que você poderá customizar, como o padding, o float à esquerda, o alinhamento e a justificação.
No footer do meu blog tenho o seguinte:
<div id=”footercolumns”>
<div class=”inside”>
<div class=”block first”>
<h1>Navegação</h1>
<ul>
<li><a href=””>Home</a></li>
<li><a href=””>Contactos</a></li>
<li><a href=””>Sobre Paulo Faustino</a></li>
<li><a href=””>RSS Feed</a></li>
<li><a href=””>Themes WordPress</a></li>
<li><a href=””>Publicidade</a></li>
<li><a href=””>Politica Privacidade</a></li>
<li><a href=”” target=”_blank”>Google Adsense</a></li>
<li><a href=”” target=”_blank”>Netaffiliation</a></li>
<li><a href=”” target=”_blank”>BidVertiser</a></li>
<li><a href=”” target=”_blank”>Text Link Ads</a></li>
</ul>
</div>
<div class=”block”>
<h1>Artigos Populares</h1>
<ul>
<li><a href=”” target=”_blank”>Inserir Blog nos Motores de Busca e Directorios</a></li>
<li><a href=”” target=”_blank”>Themes WordPress Grátis</a></li>
<li><a href=”” target=”_blank”>Como fazer uma barra de pesquisa Google</a></li>
<li><a href=”” target=”_blank”>Ferramentas de SEO</a></li>
<li><a href=”” target=”_blank”>Tutorial de instalação e utilização OpenX</a></li>
<li><a href=”” target=”_blank”>Criar um blog de sucesso em 12 meses</a></li>
<li><a href=”” target=”_blank”>Ganhar dinheiro com Videos</a></li>
<li><a href=”” target=”_blank”>Inserir Google Maps no Blog</a></li>
<li><a href=”” target=”_blank”>Como utilizar o Webmaster Tools</a></li>
</ul>
</div>
<div class=”block”>
<h1>Leitores Recentes</h1>
(script do MyBlogLog aqui)
</div>
</div>
</div>
No lugar de cada coluna, é possível fazer algumas modificações e inclui qualquer outro tipo de informação. Isto é apenas um exemplo com os dados incluidos, para que possa situar-se mais facilmente relativamente ao exemplo que coloquei na imagem.
O colega Mário Andrade dá ainda uma ajudinha a importar automaticamente os artigos mais recentes no seu blog. Considere também a utilização dessa linha de código com provavelmente umas tags <li> para ajudá-lo a organizar melhor a informação.
Alguns exemplos de footers criativos
———————-
