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
———————-
Helder Encarnação
A ideia do footer dinâmico é muito boa. Dá outra vida ao blogue. Há aqui uns exemplos bem à maneira!!
Helder Encarnação
Os footers dinâmicos conferem aos blogues uma estética muito interessante. E é sem dúvida um espaço na página que convém aproveitar. Tenho alguns blogues que usam footers de três colunas e têm dado bons resultados!
Helder Encarnação publicou um post sobre..A cantilena dos P’s
André Monteiro
Paulo, mais uma vez, parabéns pelo excelente post! Estava exatamente pensando em elaborar um footer de 3 colunas e esse seu post veio na hora certa!
Como aqui no Rio de Janeiro tem feito um frio enorme (estamos no inverno, aqui no Brasil) eu tenho aproveitado minhas noites para ler alguns artigos, e dentre eles estão os textos do fique-rico e do WL.
Gostaria que você escrevesse um post falando das redes sociais que você participa. Ao ler o seu post “O dia-a-dia de um blogger e freelancer profissional” no fique-rico você disse que espalha seus posts por aproximadamente 20 redes sociais. Gostaria que você falasse sobre isso e se possível fizesse uma lista, dando esse caminho para nós.
O Rodrigo Muniz publicou uma lista com sites de “pings”. O que você acha sobre isso? O link do artigo dele é esse: http://rodrigomuniz.com/blog/dicas-depois-de-instalar-o-wordpress/
Um grande abraço e valeu pela disposição em nos ajudar!
cenourinha
Basta adicionar as divs. Pode ser um local bastante bom para colocar algumas brincadeiras…
cenourinha publicou um post sobre..iPhone 3G – O que lhe falta?
Muhammad
Está boa esta! Gostei, vou experimentar desenvolver num blog meu, se tiver encontrado algum problema…aviso!!!
Abraço!
Paulo Faustino
@ Helder Encarnação
Obrigado pelo comentário. De facto um bom footer pode ser um excelente aliado de um blogger. Que tipo de conteúdos o colega coloca nos seus footers?
@ André Monteiro
Obrigado pelo comentário colega. Já fiz refereência a muitas coisas dessas que você falou. Veja estes artigos:
- http://www.fique-rico.com/2008/03/18/redes-sociais-estilo-digg-em-portugues/
- http://www.fique-rico.com/2008/03/20/redes-sociais-estilo-digg-em-portugues-parte-ii/
- http://www.fique-rico.com/2008/03/20/redes-sociais-estilo-digg-em-portugues-parte-ii/
@ cenourinha
Obrigado pelo comentário colega. Muito bom para colocar contadores, comentários, caixa de logins, widgets, enfim. Há tanta coisa para lá colocar, que fica dificil escolher ehehehe
@ Muhammad
Obrigado pelo comentário colega. Força nisso. Algum problema deixe um comentário.
Obrigado a todos!
Paulo Faustino publicou um post sobre..Lançamento do Website Grande-Ecrã.com
Helder Encarnação
@ Paulo Faustino: Por exemplo, no meu blogue pessoal (www.helderencarnacao.com) tenho um rodapé com “Últimos posts”, “Posts mais populares” e “Leitores recentes”. E esse rodapé que tenho é bem grande
Helder Encarnação publicou um post sobre..Um objecto de desejo chamado iPhone
Rúben M.
Eu pessoalmente gosto de utilizar esse footer com divs para por o flickr
etc
Rúben M. publicou um post sobre..O que é Feed RSS ?
Código PT
Boas!!
Um footer bem aproveitado pode trazer bastantes benefícios. Alem de dar mais informação ao leitor, também dá outra aparência ao blog.
Cláudio Novais
Olá,
Mais um artigo seu, que descubro, e que é deveras importante para a criação do meu futuro blog do WordPress. Estive para lhe enviar um email a perguntar como tinha feito aquilo neu seu blog do fique-rico.com. Agora já sei, mil obrigados!!
Abraços,
Cláudio Novais
Cláudio Novais publicou um post sobre..Dê um visual mais bonito ao Grub
Doufer
Boa coletânea de footers, eu simplesmente adoro entrar em galerias de design pra ver os belíssimos sites.
Posso dizer que sou um grande observador desses trabalhos, apesar de não trabalhar na área, faço por gosto.
Abraço.
Doufer publicou um post sobre..Conheça o verdadeiro criador do iPod
Marcus
olá amigo eu gostaria saber se você poderia ajudar me a conseguir um tamplante de 3 colunas html para eu colocar no meu blogger são aqueles codigo html.
um forte abraço
prof Marcus
Edilecio
Muito bom esse tutorial
Caio
No meu blog, apareceu tudo um em baixo do outro, não ficou um do lado do outro não…
Johnatan Ivini
muito, bom, acho interessante e elegante esses tipo de rodape, da uma opção a mais ao usuario.
Gaah Braga
alguem me ajuda ? *-*
eu tenho um blog no wordpress e tals maais queria saber se é preciso baixar ou compar algo para por as colunas.. Obrigada
Tony Marle
O meu ficou igual ao do Caio.
No meu blog, apareceu tudo um em baixo do outro, não ficou um do lado do outro não…
HDantas
Pega o código que irá inserir no footer, e troque as aspas de (”) para (“).
Exemplo:
Fica assim:
Troque todas…
Obs: E nos deixa assim caso nao tenha link:
HDantas
Comentários não aceita html ¬¬
HDantas
Exemplo aqui na imagem:
http://images.paraorkut.com/img/katrixupload/b63ef2d4b6196cc12d9ea7941de8341a.jpg