Dividir o rodapé do blog - Footer


Dividir o rodapé do blogspot (footer do blog) é mais fácil do que parece, basta trocar algumas linhas de códigos e pronto. Sugerimos que antes de começar entre na pagina layout e remova tudo que tiver no rodapé do blog, você não precisa excluir apenas arrasta para a coluna do blog ou embaixo das postagens, pois em poucos minutos vamos colocá-los no lugar novamente.


Mas para começar a divisão do footer em 3 partes o primeiro passo é entrar na pagina editar html (não clique para expandir o modelo), mas antes de começar é bom fazer um backup do blog para não perder nada no caso de imprevistos. Agora que não corremos mais o risco de estragar nada vamos começar.

Procure por esse trecho no html do seu blog (está quase no final):

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

Quando achar apague, tome cuidado para não tirar ou deixar nenhum sinal no inicio ou fim do código e coloque esse no lugar:

<div id='footer-wrapper'>
<div id='footer-column-container'>
<div id='footer-column-left' style='float:left; width: 32%;margin: 2px;'>
<b:section class='footer-column' id='footer2' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div id='footer-column-center' style='float:left; width: 32%;margin: 2px'>
<b:section class='footer-column' id='footer3' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div id='footer-column-right' style='float:right; width: 32%;'>
<b:section class='footer-column' id='footer4' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div style='clear:both;'/>
<div id='footer-bottom'>
<b:section class='footer' id='footer-column-bottom' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div style='clear:both;'/>
</div></div>
<div style='clear:both;'/>

E já está tudo pronto, agora é só entrar na pagina layout e arrastar os gadgets para cada uma das colunas do rodapé do seu blog e assim usar melhor o espaço disponível.

Se a parte do rodapé ficar sem cor de fundo podemos colocar esse código:

#footer-wrapper{background-color: #ffff66;border: 1px solid #0000FF}

junto com os outros estilos CSS do blog, isso fica no começo do html. É fácil de achar porque no blog tem muitos códigos parecidos com esse. Para trocar a cor é só mudar o final ffff66, veja aqui o código de outras cores. E as bordas você pode ver nosso tutorial sobre colocar e alterar bordas que tem explicações detalhadas.


Note que neste código que colocamos apareceu 3 vezes width: 32%; isso é a largura de cada uma das colunas no rodapé do blog, portanto altere os valores como desejar, mas claro que a soma das 3 chegar até 100% provalemente uma das colunas passará para linha debaixo, então se tiver esse problema é só reduzir um dos valores (sempre é bom deixar algum espaço sobrando).

25 comentários:

crazyangel disse...

Olá Fabiano, achei a dica fácil e bem util...já vou testar e depois volto para dizer se deu certinho mesmo.
Até já...

Anônimo disse...

Queria saber como faço para adicionar uma coluna no template????

crazyangel disse...

Prontinho! Fiz as modificações usando meu blog testes, deu certinho! Parabéns pelo blog e obrigada por sempre nos ajudar!
Até...

Emanoel disse...

O fabiano roberto, valeu mano, agora eu tou com um problema no meu navegador... ele naum quer mostrar as colunas corretamente! vo ter que reinstalar o pc! mas parabéns, é mais fácil do que tantos tutos que eu vi ai!

Mariza Matheus disse...

Muito obrigada! Deu certinho. Só queria saber como colocar uma cor de fundo?

Obrigada

Mariza

Fabiano Roberto disse...

Emanoel

eu não sei o que houve, mas recentemente a pagina layout do blogger está mesmo fora de lugar, até semana passada estava tudo certo, agora alguns de meus blog as colunas aparecem uma embaixo da outra, mas o blog continua no modelo correto.

maxwell disse...

a algum tempo eu tem
ntei fazer isso mas não deu certo.
agora vou testar

valeu pela dica

Emanoel disse...

pois é fabiano, agora preciso fazer uma modificação no meu blog e não tá dando certo... que ódio; e virei fan do seu blog, to enviando pra meus amigos ;)

SERJAO_O_MARMANJJUS disse...

não encontrei o trecho citado no código, em meu template.

Fabiano Roberto disse...

Emanoel

tente fazer novamente, geralmente os problemas acontecem por algum detalhe nos códigos, as vezes uma letra a mais ou faltando não deixa funcionar.


SERJAO_O_MARMANJJUS
se o seu template é modificado ou baixou da internet talvez use outras tags, então fica dificil usar essa dica.

tente procurar somente por footer-wrapper e veja se acha algo parecido com aquilo que indicamos no tutorial

SERJAO_O_MARMANJJUS disse...

tentei a sua outra dica, mas na hora de salvar, dá erro.
vou deixar assim mesmo pra não correr o risco de fazer alguma bobagem.
obrigado pela atenção.
com certeza vou continuar de olho nas suas dicas.

Emanoel disse...

AE FABIANO ROBERTO, O BLOGGER VOLTOU AO NORMAL, AS COLUNAS DEU CERTO. VLW AI HEIM, PARABÈNS, ÓTIMO BLOG.

Zinha Santos disse...

Não encontrei algo que pudesse me ajudar com minha dúvida. Quero um lay xml, mas nao consigo mudar as imagens, as coisas, como eu faço isso?

Emanoel disse...

O FABIANO, não é anuciando, mas olha porque ficou preto no meu blog ai;;; por favor.

http://detonandogta.blogspot.com/

se quiser excluir esse comentário exclui, mas olha e me diz.

Fabiano Roberto disse...

Emanoel

falou colocar o estilo content-wrapper, veja em nosso tutorial


Zinha Santos
depende de quais imagens quer trocar, mas de modo geral para alterar o template entre na pagina editar html e procure por background url(....) aqui terá o endereço de uma imagem então é só trocar por outra, veja aqui como hospedar imagens
http://www.dicasparablogs.com.br/2008/12/hospedagem-de-imagens.html

se tiver duvidas sobre qual é a imagem copie o endereço que está no seu template e coloque no navegador para ver a imagem antes de trocar.

fans do pokemon oficial disse...

nao entedi direito nao achei nao

Fabiano Roberto disse...

fans do pokemon oficial
se baixou seu template de algum site ele pode usar tags diferentes, então fica mais complicado saber onde modificar

joka disse...

obrigadao pessoal funcionou mesmo!
pessoal tenho uma duvida é k eu tive de baixar um template para ter duas barars laterais e agora eu nao sei mudare as cores por o editor de cores por favor me ajudem!

Fabiano Roberto disse...

joka
alguns templates que você baixa não funciona bem a pagina cores e fontes, veja aqui como corrigir isso
http://www.dicasparablogs.com.br/2009/06/pagina-cores-e-fontes.html

mas vai dar um pouco de trabalho

Aline Girão disse...

Oi, Fabiano!
Como deixar a fonte e a cor dos títulos do rodapé triplo iguais aos da sidebar?
Obrigada e Feliz Natal para ti!

Fabiano Roberto disse...

Aline Girão, no estilo #footer-wrapper pode colocar as formatações de texto

http://www.dicasparablogs.com.br/2009/04/como-formatar-o-texto-do-blog.html

blog da duda disse...

ola eu qeeria saber como colocar foto no rodape vc sabe ? obg
duda

Fabiano Roberto disse...

blog da duda
entre na pagina layout, clique para adicionar um gadget no rodapé, se não der pode adicionar na coluna do blog e depois arrastar

nos gadgets tem um para enviar imagens

Anônimo disse...

Não onsigo dividir o rodapé. Oque eu faço ?

Fabiano Roberto disse...

tente fazer novamente prestando atenção nos detalhes na hora de copiar e colar os códigos.

as vezes um letra faltando ou sobrando não deixa o código funcionar