terça-feira, 10 de novembro de 2009

Como adicionar três colunas no footer (rodapé) do blogger

Como eu recebei por email, surgiram algumas dúvidas a respeito do tutorial que eu coloquei aqui no blog, de adicionar quatro colunas no footer, e espero ter resolvido todas elas, porém, resolve trazer agora outro tutorial mas dessa vez muito mais simples, e ao invés quatro colunas são apenas três. Agora fica a gosto do blogueiro se preferir colocar quantas colunas deseja no footer do blogger.

Mas vamos ao passo-a-passo, entre logado em seu blogger e em seguinda click em "layout" em qualquer uma das duas opções que estou mostrando nas fotos abaixo.

Em seguinda basta clicar na ferramenta "editar html" para abrir a página de edição e troca de template.


Novamente bato na mesma tecla, nunca eu disse nunca edite ou troque o seu template sem antes salvar o seu template, para isso basta clicar no ícone indicado nessa foto e salvar o modelo que vai aparecer, para evitar futuros transtornos e dores de cabeça.


Agora vamos aos códigos para colocar as colunas no footer, não é necessário clicar em expandir modelos de widgets, basta Pressione Ctrl+F e procure por:

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

Encontrado o código acima, basta substituir ele por esse código seguinte:

<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;'/>
Então é isso galera, espero ter ajudado e caso surja alguma dúvida basta entrar em contato pelos comentários ou mesmo por email.

0 comentários:

Postar um comentário

divulque

Blogoteca

Boas matérias

 

NewTechSound

Amazing Counters
Toshiba Satellite Laptops