Como dividir gadgets em mais colunas

Se você quer criar um blog de notícias, e quer dividir sua postagem em várias colunas como aparece em jornais, este código htmal/javascript vai ser de grande utilidade. Também serve pra fazer menu horizontal com texto ou imagens. O blog Testando Scripts mostra agora como fazer isso, como a imagem acima.

Este código pode ser colocado nos gadgets, através de "html/javascript" e, nas suas postagens, com um simples passo:

- Clique em "nova postagem" e na janela que abrir, alterne de "escrever" para "html".

Agora adicione o código abaixo:

<div style="float:left; width:25%">texto
<a href="url link" ><img border="0" src="url da imagem" /></a>
</div>
<div style="float:left; width:25%">texto
<a href="url link" ><img border="0" src="url da imagem" /></a>
</div>
<div style="float:left; width:25%">texto
<a href="url link" ><img border="0" src="url da imagem" /></a>
</div>
<div style="float:left; width:25%">texto
<a href="url link" ><img border="0" src="url da imagem" /></a>
</div>

Algumas configurações:

- O "Width" é a largura da coluna e se você utilizar 4 colunas iguais, cada uma será 25%. Se usar 3 colunas, cada uma terá 33%. Mas isso não é uma regra, o importante é que a soma deve ser 100%. Exemplo:

20% - 30% - 25% - 25%

33% - 33% - 33%

40% - 50%

- Caso você não utilize imagens na sua postagens, pode apagar o código abaixo:

<a href="url link" ><img border="0" src="url da imagem" /></a>

- Se for utilizar só imagens, deixe o código completo e altere apenas o Width.

Estou fazendo o meu superior do blog com esse mesmo código, divindo em 6 ou 7 colunas com o width em todos. Não vai ficar com efeito hover mas acredito que assim será mais fácil de personalizar. Com efeito hover, é preciso editar o html do blog.

Espero ter ajudado. Se ficou alguma dúvida, deixe um comentário abaixo.