Algumas pessoas me perguntaram como fazem para colocar lado a lado imagens dentro do post. Para compreender melhor como funcionam as imagens dentro de um post, é preciso clicar na aba HTML do painel de postagem e ver como se apresenta o código de cada uma.
O código da imagem está representado por:
<img border="0" height="100" width="94" src="http://4.bp.blogspot.com/-2QsUcP6xA40/TosMzgLgpoI/AAAAAAAAb9Q/ohS4LbvUfN4/s400/device.jpg" />
O link da imagem (para onde o leitor é levado quando clica na imagem) em:
<a href="http://4.bp.blogspot.com/-2QsUcP6xA40/TosMzgLgpoI/AAAAAAAAb9Q/ohS4LbvUfN4/s1600/device.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"> (aqui vai o código da imagem) </a>
Note que por padrão, o link sempre apontará para a própria imagem (o que faz com que ela abra em uma nova aba quando clicamos nela) mas que pode ser alterado, ou seja, você pode substituir o que está entre aspas (o "http://...) por um outro link, se desejar que a imagem leve para outro blog/site ou página do seu blog.
E, por fim, tanto o link quanto a imagem estão dentro de uma div (ou um bloco) chamado separator, que carrega algumas definições de estilo, como clear:both e text-align:center:
<div class="separator" style="clear: both; text-align: center;">
código do link e da imagem
</div>
Quando queremos colocar duas ou mais imagens lado a lado em um post, o primeiro a fazer é remover o código acima (da div separator) de todas as imagens:
Na imagem acima você vê o código de duas imagens acrescentadas em um post, já com o código do div separator eliminadas (não esqueça de apagar o </div> também).
Se você der uma olhada nestas imagens agora no modo Escrever, elas não se apresentarão lado a lado ainda, mas estarão acima uma da outra. Devemos então eliminar todos os espaços entre elas, ficando assim
Se você olhar agora no modo Escrever, elas estarão lado a lado:
Agora, para alinhá-las ao centro, basta, no modo Escrever, clicar sobre a primeira e centralizá-la ao centro, como abaixo:
Isso fará com que, automaticamente, as duas imagens sejam alinhadas ao centro, lado a lado.
 |
| Código de uma imagem em um post do Blogger - clique na Aba HTML |
<img border="0" height="100" width="94" src="http://4.bp.blogspot.com/-2QsUcP6xA40/TosMzgLgpoI/AAAAAAAAb9Q/ohS4LbvUfN4/s400/device.jpg" />
O link da imagem (para onde o leitor é levado quando clica na imagem) em:
<a href="http://4.bp.blogspot.com/-2QsUcP6xA40/TosMzgLgpoI/AAAAAAAAb9Q/ohS4LbvUfN4/s1600/device.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"> (aqui vai o código da imagem) </a>
Note que por padrão, o link sempre apontará para a própria imagem (o que faz com que ela abra em uma nova aba quando clicamos nela) mas que pode ser alterado, ou seja, você pode substituir o que está entre aspas (o "http://...) por um outro link, se desejar que a imagem leve para outro blog/site ou página do seu blog.
E, por fim, tanto o link quanto a imagem estão dentro de uma div (ou um bloco) chamado separator, que carrega algumas definições de estilo, como clear:both e text-align:center:
<div class="separator" style="clear: both; text-align: center;">
código do link e da imagem
</div>
Quando queremos colocar duas ou mais imagens lado a lado em um post, o primeiro a fazer é remover o código acima (da div separator) de todas as imagens:
Na imagem acima você vê o código de duas imagens acrescentadas em um post, já com o código do div separator eliminadas (não esqueça de apagar o </div> também).
Se você der uma olhada nestas imagens agora no modo Escrever, elas não se apresentarão lado a lado ainda, mas estarão acima uma da outra. Devemos então eliminar todos os espaços entre elas, ficando assim
Se você olhar agora no modo Escrever, elas estarão lado a lado:
Isso fará com que, automaticamente, as duas imagens sejam alinhadas ao centro, lado a lado.
0 comentários:
Postar um comentário