Twitter Delicious Facebook Digg Stumbleupon Favorites More

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%.

5 comentários:

Anônimo disse...

Muito bom, muito úteis essas dicas! Valeu.

Anônimo disse...

Muuuittoooo bom mesmo!!!
Valeu!

Vládia Queiroz disse...

e é possível deixar o texto das três colunas justificado? ou sempre vai ficar assim como no seu exemplo? isso serve para códigos html? quero colocar duas telas de streaming uma do lado da outra, posso utilizar esse mesmo código e inserir no lugar das postagens o código html dos stramings? obrigada

Vládia Queiroz disse...

aconteceu algo estranho aqui: usei os seus comandos e consegui as duas colunas, mas a coluna fixa, da lateral do blog desceu para debaixo das postagens, desconfigurou toda a página. então desfiz tudo. eu usei seus comandos para separar dois streamings, deixei as janelas 240x180, bem pequenas. elas cabiam com folga no espaço, não entendi o que aconteceu. se tiver uma idéia, agradeço

Vládia Queiroz disse...

olha, eu consegui com duas colunas numa boa. mas três, mesmo expandindo o layout, sempre a coluna da direita passa pra baixo. o que será? eu já pesquisei em tudo que foi canto, já deixei mensagem em tudo que foi blog e nada. será que pode me ajudar? se puder, escreve pra mim. eu te agradeço muito. vladiaqueiroz@gmail.com

Postar um comentário

Envie um comentário!

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Blogger Templates