Como criei um footer de 3 colunas no meu blog Wordpress
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
———————-
Amante do Wordpress ? Talvez queira subscrever o nosso RSS Feed Completo ?
Outros artigos de interesse:
13 Comentarios a “Como criei um footer de 3 colunas no meu blog Wordpress”
Deixar resposta
|
Patrocinadores
A ideia do footer dinâmico é muito boa. Dá outra vida ao blogue. Há aqui uns exemplos bem à maneira!!
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
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!
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?
Está boa esta! Gostei, vou experimentar desenvolver num blog meu, se tiver encontrado algum problema…aviso!!!
Abraço!
@ 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
@ 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
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 ?
[...] ir desde a instalação do plugin Wordpress Related Posts, que utilizo aqui no blog, como com a criação de um footer criativo que contenha os artigos mais populares de sempre do seu blog. Também existem outros plugins [...]
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.
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
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
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