colocando colunas vertical no blog

colocando colunas vertical no blog

Como deixar seu template com 3
colunas vertical como na figura abaixo!!!

Às vezes, nos deparamos com templates que não possuem um rodapé (Footer) e a ausência desse recuso limita locais que poderiamos utilizar para adicionar novas gadgets. Às vezes, encontramos templates com o rodapé, mas só que sem divisão, o que também não ajuda. Neste post iremos aprender como dividir o rodapé do template em três colunas.

Vamos utilizar o Template Minima do Blogger como nossa "cobaia". Por padrão, ele é configurado..

O que iremos fazer será adicionar logo abaixo da seção destinada as postagens do blog, um rodapé (footer) dividido em três colunas. Para isso, vamos fazer o seguinte:

1 - Faça um backup do seu template atual. Se você ainda não sabe como fazer isso, basta clicar aqui.

2 - Agora vá em Layout -> Editar HTML (Não é necessário Selecionar a opção "Expandir modelos de widgets"). Com a ajuda de Crtl+F encontre o código CSS referente ao rodapé (Footer). No Minima é este que está logo abaixo:

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

Substitua todo o codigo acima por esse código que está logo abaixo:

/* Footer<br /> ----------------------------------------------- */<br /> #footer-column-container {<br /> clear:both;<br /> }<br /> .footer-column {<br /> padding: 0px;<br /> }

3 - Novamente com a ajuda do Crtl+F encontre o código.

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

4 - Substitua o trecho <b:section class='footer' id='footer'/> pelo código abaixo.

<div id='footer-column-container'><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;'/><br /> </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;'/><br /> </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;'/><br /> </div><div style='clear:both;'/><div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'><b:section class='footer' id='col-bottom' preferred='yes'><br /> <b:widget id='Text2' locked='false' title='' type='Text'/><br /> </b:section><br /> </div><div style='clear:both;'/></div>

5 - Visualize e, se tudo estiver certo, salve.

É isso. Até a próxima.