25 de dez. de 2008

Dividir Postagem ou Sidebar em Colunas

Existe um código muito interessante para você poder dividir postagens e/ou textos ou widgets da sidebar em colunas paralelas. O código é bem simples e de fácil formatação. Você poderá utilizar 2, 3 ou mais colunas fazendo poucas modificações.

Sua utilização na é no código HTML do blog. é só colá-lo num elemento de página ou em uma determinada postagem e organizar facilmente.Vejamos:

  • Para 2 colunas, basta inserir em sua postagem o seguinte código e colocar o texto e/ou imagens na ordem indicada substituindo pela marcação em vermelho:

<div style="float: left; WIDTH: 45%">Aqui o Texto da Coluna da Esquerda</div><div style="float: right; WIDTH: 45%">Aqui o Texto da Coluna da Direita</div><divstyle="clear: both"></div>

Veja um exemplo:

  O blog é um diário pessoal. Uma tribuna diária. Um espaço interativo. Um local para discussões políticas. Um canal com as últimas notícias. Um conjunto de links. Suas idéias. Mensagens para o mundo.O seu blog pode ter a forma que você quiser. Há milhões de blogs, de todos os tamanhos e formatos. Na verdade, não há regras.
Dito de forma simples, o blog é um site onde você está sempre escrevendo coisas. As novidades aparecem na parte de cima, para que os visitantes vejam. Em seguida, os visitantes fazem comentários sobre a novidade, acrescentam um link ou enviam emails. Ou não.
 
  • Para 3 colunas, basta inserir em sua postagem o seguinte código:

<div style="float: left; WIDTH: 30%">Aqui o Texto da Coluna da Esquerda</div><div style="float: center; WIDTH: 30%">Aqui o Texto da Coluna Central</div><div style="float: right; WIDTH: 30%">Aqui o Texto da Coluna da Direita</div><divstyle="clear: both"></div>

De azul: Observe que acrescentamos a linha central (float:center) e alteramos a porcentagem de cada coluna de 45 para 30% (De preferência, a soma das porcentagens deve ser igual a 90%).

Exemplo:

  O blog é um diário pessoal. Uma tribuna diária. Um espaço interativo. Um local para discussões políticas. Um canal com as últimas notícias. Um conjunto de links. Suas idéias. Mensagens para o mundo. O seu blog pode ter a forma que você quiser. Há milhões de blogs, de todos os tamanhos e formatos. Na verdade, não há regras.Dito de forma simples, o blog é um site onde você está sempre escrevendo coisas. As novidades aparecem na parte de cima, para que os visitantes vejam. Em seguida, os visitantes fazem comentários sobre a novidade, acrescentam um link ou enviam emails. Ou não.  
  • Para 4 colunas, basta inserir em sua postagem o seguinte código:

<div style="float: left; WIDTH: 22%">Aqui o Texto da Coluna da Esquerda</div><div style="float: left; WIDTH: 22%">Aqui o Texto da Coluna Central da Esquerda</div><div style="float: right; WIDTH: 22%">Aqui o Texto da Coluna Central da Direita</div><div style="float: right; WIDTH: 22%">Aqui o Texto da Coluna da Direita</div><divstyle="clear: both"></div>

Você ainda pode alterar as porcentagens das colunas da forma que quiser, desde que não pase de 100%.

0 comentários:

Postar um comentário