Algumas pessoas que visitam nosso blog perguntaram sobre como colocar imagens uma ao lado da outra como fizemos com os links para nossa comunidade no Orkut, Facebook e Vídeos do Youtube que temos em nosso menu. Existem varias maneira de fazer aquilo usando códigos CSS ou tabelas em HTML(que já mostramos em outra postagem: Dividir um gadget em duas colunas), mas preferimos mostrar como fazer utilizando as divs.
Naturalmente estamos falando de gadgets de html/javascript onde podemos colocar códigos diretamente dentro deles, se quiser colocar gadgets ao lado do título do seu blog veja aqui:Como dividir o cabeçalho do blog em duas partes.
Voltando ao assunto colocar as imagens ou textos lado a lado no gadget use o seguinte código:
O valor 33 é utilizado porque são 3 colunas se usar outra quantidade e altere esse valor para que a soma seja algo próximo de 100 mas sem ultrapassar, por exemplo para duas colunas poderiamos usar 49 em cada uma delas.
O Código para colocar imagens é assim:
Mas é claro você terá que hospedar uma imagem e alterar o endereço do link, este do exemplo é da nossa comunidade no orkut.
Se depois de utilizar as 3 colunas quiser voltar a fazer uma coluna só acrescente essa linha no final <div style="clear:both">conteudo aqui</div>, ficando deste jeito:
Esse código não é indicado para fazer menus de texto, veja aqui um código melhor para menus:Links lado a lado (menu horizontal).
Mais Links úteis:
Colocar ou alterar as bordas
Como fazer um banner
Como Formatar o Texto do Blog
Como já dissemos no inicio existem outras maneiras de fazer isso, mas achamos essa uma das melhores, pois seria possível colocar, por exemplo, duas imagens com um texto no meio ou qualquer outra combinação de conteúdo nas colunas que acabamos de colocar dentro do gadget do blogger.
Naturalmente estamos falando de gadgets de html/javascript onde podemos colocar códigos diretamente dentro deles, se quiser colocar gadgets ao lado do título do seu blog veja aqui:Como dividir o cabeçalho do blog em duas partes.Voltando ao assunto colocar as imagens ou textos lado a lado no gadget use o seguinte código:
<center>
<div style="float:left; width:33%">conteudo aqui</div>
<div style="float:left; width:33%">conteudo aqui</div>
<div style="float:left; width:33%">conteudo aqui</div>
</center>
O valor 33 é utilizado porque são 3 colunas se usar outra quantidade e altere esse valor para que a soma seja algo próximo de 100 mas sem ultrapassar, por exemplo para duas colunas poderiamos usar 49 em cada uma delas.
O Código para colocar imagens é assim:
<a href="http://www.orkut.com.br/Main#Community?cmm=46751209"><img src="endereço da imagem" border="0" /></a>
Mas é claro você terá que hospedar uma imagem e alterar o endereço do link, este do exemplo é da nossa comunidade no orkut.
Se depois de utilizar as 3 colunas quiser voltar a fazer uma coluna só acrescente essa linha no final <div style="clear:both">conteudo aqui</div>, ficando deste jeito:
<center>
<div style="float:left; width:33%">conteudo aqui</div>
<div style="float:left; width:33%">conteudo aqui</div>
<div style="float:left; width:33%">conteudo aqui</div>
<div style="clear:both">conteudo aqui</div>
</center>
Esse código não é indicado para fazer menus de texto, veja aqui um código melhor para menus:Links lado a lado (menu horizontal).
Mais Links úteis:
Colocar ou alterar as bordas
Como fazer um banner
Como Formatar o Texto do Blog
Como já dissemos no inicio existem outras maneiras de fazer isso, mas achamos essa uma das melhores, pois seria possível colocar, por exemplo, duas imagens com um texto no meio ou qualquer outra combinação de conteúdo nas colunas que acabamos de colocar dentro do gadget do blogger.
Nenhum comentário:
Postar um comentário