domingo, 7 de março de 2010

Dividindo o rodapé do Blog em 3 colunas

Olá, caro leitor! Se você quer acompanhar todos os nossos artigos, sinta-se a vontade para assinar nosso feed.

Os templates disponibilizados pelo Blogger, e alguns outros personalizados, possuem apenas uma coluna no rodapé, que ocupa toda a página do Blog. Utilizar o rodapé do seu Blog para adicionar gadgets, pode ser uma ótima idéia, por não poluir a interface da página de seu Blog. É possível dividir o rodapé de seu Blog em 3 colunas, para permitir a adição de mais gadgets, sem ocupar muito espaço em seu Blog.

A divisão do rodapé de seu Blog, otimiza o layout e também permite a adição de mais gadgets, sem precisar utilizar a sidebar para adiciona-los. Seja para adicionar contadores, ou gadgets não tão importantes. Este código, divide o rodapé em 3 colunas, e também adiciona a coluna única, que permite adicionar um gadget que ocupe a página toda (visualizar a foto acima).

Antes de prosseguir com o tutorial, faça o backup do template de seu Blog, para protegê-lo de futuros erros que podem ocorrer.
-> Faça backup de seu blog para proteger o seu template e seus gadgets


No painel de seu Blog, vá em: Layout -> Editar HTML -> Pressione CTRL + F e procure pelo seguinte código:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
SUBSTITUA estas tags pelo código HTML abaixo:

<div id='footer'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<div id='footer-bottom' style='text-align: center; padding: 10px;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>
</div>
Salve o seu template. Agora, vá em Elementos da Página e veja que o rodapé de seu Blog já está dividido em 3 colunas. Caso não tenha funcionado, restaure o template que você fez download anteriormente.

Referência: Tips Blogger

14 Comentários:

Beth Muniz disse...

Ótima idéia.
Morro de medo de mexer no template, mas vou tentar.
Valeu.
Tô te seguindo.
Bom domingo.

Vinicius Chargel disse...

@Beth Muniz,

Fazendo o backup de seu template, poderá mexer a vontade nele. Quaisquer erros que houverem, basta restaurar o Backup.

Fabiano Roberto disse...

é muito util esse código já utilizei algumas vezes

Jhonata Reis disse...

Vou tentar aqui no meu,é útil pra botar gadgets que não são tão importantes,tipo arquivo e perfil.

None disse...

Muito bom o tutorial.
Segui ele com meu novo template e não deu erro nenhum. Parabéns Vinicius! Continue assim.

FRANK LAURO!! disse...

obrigado. essa dica me foi muito util!

Anônimo disse...

No meu template naum consegui encontrar o seguinte codigo:

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

Vinicius Chargel disse...

@TGADowns,

Então, provavelmente, seu blog não possui rodapé. Este hack funciona apenas em templates que possuem rodapé.

Unknown disse...

Muito boa a dica Amigo!!!!

Gostei...parabens!!!!

Como posso fazer um menu horizontal???

Vinicius Chargel disse...

@Ita Costa,

Você diz uma sidebar para seu blog?

Yago disse...

ola .. to com um probleminha, procurei pelo código no meu html mas não tem! ja cliquei para "expandir modelos de widgets" e nada..
oq faço?
vlw

Vinicius Chargel disse...

TVeCinema,

Primeiramente, veja se o seu blog tem rodapé. Se ele tiver, procure experimente procurar apenas por um pedacinho do código, até encontrar algo semelhante.

Yago disse...

Reparei q realmente meu template nao tem rodapé.. =/
fiz oq vc disse em um blog de testes e deu certo! mas e ai.. entao nao tem jeito mesmo?

Vinicius Chargel disse...

TVeCinema,

Infelizmente, é preciso sim que um blog tenha rodapé para poder dividí-lo.

Postar um comentário

-> NÃO faça comentários ofensivos;
-> Faça comentários apenas RELATIVOS ao assunto do artigo;
-> NÃO faça conversas nos comentários;
-> É PROIBIDO usar links desnecessários, para isso comente usando OpenID;
-> Os comentários são VERIFICADOS, para garantir que não seja violada as regras acima;

Se preferir, fale conosco pela página de CONTATO.

Dica
Use tags como <b> e <i> para fazer comentários mais relevantes.

Perfil

Sou Vinicius Chargel, criador e administrador do Desenvolvimento Blogger. Estudante, Twitteiro e Blogueiro. Atua na internet desde 2006, mas começou a criar blogs apenas à 1,5 anos atrás. Nascido em 1997.

Contadores/Estatísticas

Creative Commons License

Contribua com este blog!


  ©Desenvolvimento Blogger - Todos os direitos reservados.

Template by Dicas Blogger | Topo