sábado, 25 de dezembro de 2010

Como colocar imagens uma do lado da outra no blog



Muitas pessoas tem dificuldade de colocar uma foto do lado da outra. Se você é uma delas, siga os passos abaixo:

Primeiramente vamos adicionar as imagens uma embaixo da outra (não alinhe à esquerda ou à direita). Elas ficarão assim:





Clique e arraste a imagem de baixo para o lado da imagem superior. Feito isto já teremos uma imagem ao lado da outra:



Caso elas não tenham ficado uma do lado da outra, você deverá diminuir o tamanho delas.

Automaticamente elas ficarão centralizadas. Se você desejar alinhá-las à direita ou à esquerda, mude o comando na primeira linha do código clicando em editar Html:


<div class="separator" style="clear: both; text-align: center;">

Para alinhar à esquerda troque center por left;
Para alinhar à direita troque center por right;

Se você quiser que elas fiquem juntas:




Clique na aba Editar HTML e procure por float: right; ou float left; e apague. Coloque o número 0 na margem direita da primeira foto e 0 na margem esquerda da segunda foto:


<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilxgERsuJQ4GDlxBMjdJYAkCdrGWEQTaTEMIFBMXc4G-wCEJs0bkcLV45CeUJo0GAhF-ltIjNTfy7cNDjUmWZSerEe5NIWoT15QOMD6NBn15wOmtLBESTgS8SLCmbO4biAHLW2cETl2Q/s1600/araras.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 0em; margin-right: 0em;"><img border="0" height="133" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilxgERsuJQ4GDlxBMjdJYAkCdrGWEQTaTEMIFBMXc4G-wCEJs0bkcLV45CeUJo0GAhF-ltIjNTfy7cNDjUmWZSerEe5NIWoT15QOMD6NBn15wOmtLBESTgS8SLCmbO4biAHLW2cETl2Q/s200/araras.jpg" width="200" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv-ZpYdUv_6FDLijjjXmC1MvMfOJP7q8-ExQ-9LhngPtnh9l7K9Qap-Xg5WRiwbQkO0az4jqtUMOnvUYkK6BZ7j-Fbu7vZ9iYbZ5b6che8YngDsEycX33HJG2zaV2KVatuyfboOoEbpQ/s1600/araras.jpg" imageanchor="1" style="margin-left: 0em; margin-right: 1em;"><img border="0" height="133" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv-ZpYdUv_6FDLijjjXmC1MvMfOJP7q8-ExQ-9LhngPtnh9l7K9Qap-Xg5WRiwbQkO0az4jqtUMOnvUYkK6BZ7j-Fbu7vZ9iYbZ5b6che8YngDsEycX33HJG2zaV2KVatuyfboOoEbpQ/s200/araras.jpg" width="200" /></a></div>

18 comentários:

Anônimo disse...

Oi me ajudem por favor!!
Eu sou initiante no blog e não consigo alinhar as imagens 2 ou 3 lado a lado, já tentei fazer o que vcs mostram acima, mas qdo arrasto a imagem a html fica toda desorganizada e não aceita publicar, como faço isso de uma maneira mais fácil???
obrigada desde já!

Priscila disse...

Olá Érika,

Não sei se teria uma forma mais fácil, vc deve colocar uma embaixo da outra e arrastar a debaixo para cima. Perceba que para colocar 3 o tamanho delas terá que ser bem reduzido.
Abrçs.

Deborah Martin Salaroli disse...

Tudo bem explicadinho. Valeu!!!!

Alê Aguasanitaria disse...

Caramba! Obrigado por ensinar direitinho o fundamental! =D Ajudou muito. Eu testei com duas, e também com 3 e elas ficaram lado a lado. Realmente é preciso diminuir o tamanho. Usei o programa Photoscape para redimensionar as imagens. Obrigado!
Favoritei seu blog.
Abraço Alê =)

Anônimo disse...

O post me ajudou muiiiito mesmo vlw! nota 10!!!

Brujo - By Thor's Hammer disse...

Ótima dica.
Alinhei 4 fotos, duas colunas de duas, ficou 100% da maneira que eu planejei.

Fatima disse...

Muito legal seu blog...parabens!!!

birapcbira disse...

valeu cara ótimas dicas!

Dalila Gonçalves disse...

Oi linda!
Adorei seu blog e seus posts, estou seguindo..
Segue o meu de volta?

dalilamakeup.blogspot.com
http://www.youtube.com/user/dalilamakeup1

bjim

Anônimo disse...

vocês são legais eu adorei o site bjs

Kauan Silva disse...

Valeu, consegui direitnho!

Anônimo disse...

Estou montando um blog de variedades, essa dica caiu como uma luva faça uma visita http://www.tirandopedaco.blog.br

Dj Lex disse...

Mais bem explicado impossível!

m.cuppari disse...

Gostaria de agradecer, depois de horas, foi como num passe de mágica. Eu parecia uma profissional....rs tkankssssss!

Liih disse...

Legal! Consegui, muito obrigada! *-*

Unknown disse...

valeu...obrigada pela dica, ajudou muito!

Unknown disse...

muito útil, obg

http://entaodeixaflorir.blogspot.com.br/

A Casa da Mãe Jana disse...

Ajudou bastante, obrigado pelas dicas!!!!

Artigos Relacionados

Related Posts Plugin for WordPress, Blogger...