POSTAGENS ROTATIVAS

Ticker

6/recent/ticker-posts

Como dividir gadgets em mais colunas

Dicas d -HTML
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 html/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.

FONTE:http://testandoscripts.blogspot.com.br/2013/02/como-dividir-gadgets-em-mais-colunas.html