Home Programas Revistas Ebooks Videos Online Ufologia
2008-07-09

Como colocar duas colunas no rodapé do seu blog  

Você já deve ter visto em vários blogs, lá no final da página, no rodapé, 2 ou até 3 colunas (veja aqui no meu). Pois bem, saiba que é bem fácil colocar essas colunas no seu blog. Os códigos apresentados abaixo podem variar de Template para Template, mas vai ser bem fácil achar.

Primeiro salve seu template ("salvar modelo completo"), pra que se der algum erro, você sabe...

1º passo:Encontre em seu template esse código abaixo. NÃO marque Expandir modelos de widgets. Se não encontrar exatamente como está aqui, procure apenas pelo "/* Footer", pois é apartir desse que precisamos, e o que vier abaixo dele pode variar de template para template,

/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}


2º passo:Substitua tudo até "text-align: center; }" pelo seguinte código:

#footer-wrapper{clear:both;width:100%;}
.footer-column{text-align:left;margin:0;width:48%;}
.footer-bottom{text-align:center;padding:10px;}



3º passo:Agora localize novamente em seu template esse trecho de código:
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Substitua todo ele por esse código abaixo:
<div id='footer-wrapper'>
<div class='footer-column' style='float: left;'>
<b:section id='footer-left' preferred='yes'/>
</div>
<div class='footer-column' style='float: right;'>
<b:section id='footer-right' preferred='yes'/>
</div>
<div style='clear:both;'/>
<div class='footer'>
<b:section id='footer-botom' preferred='yes'/>
</div>
</div> <!-- end footer-wrapper -->

Primeiro visualize para testar, se não houver nenhum erro, salve seu template e, em "layout"veja que existem duas colunas (imagem abaixo "Depois") para incluir "Adicione um elemento de página" que você desejar. Pronto.

Antes
Depois




Bookmark este post:
Ma.gnolia DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google

VEJA TAMBEM



Postar um comentário

Por favor deixe seu email pra futuro contato. Comentários sem email válido não serão respondidos!