Redimensionar as imagens do Picasa no Blogger torna-se simples quando você aprende a decifrar o código que é inserido em seu post. Ao ter um blog no Blogger, imediatamente você terá uma conta no Picasa para hospedar suas imagens.Não importa quais sejam as dimensões das suas imagens, o Picasa sempre redimensiona seu comprimento para 1600px. Eis a imagem abaixo, suas dimensões são de 1913 x 1500, isso significa que ela possui comprimento de 1913px e altura de 1500px, redimensionada para 320 x 250 (proporção matemática pura e simples):
 |
| Aerosmith - Fonte: Google Imagens |
Eis o seu código:
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmE4XYzNrqYDYEV95dc5YdwUG7KAKrWix8XcYoajXupsa1oXoh3A2fY9S0vBcSThFxeYXYuYRK6BLFLD1creoRvpPoXGAgMoB9Oqcrg4tTiK6k3xE6es4RbHeMFKJwHBtHh0F6/s1600/aerosmith1.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmE4XYzNrqYDYEV95dc5YdwUG7KAKrWix8XcYoajXupsa1oXoh3A2fY9S0vBcSThFxeYXYuYRK6BLFLD1creoRvpPoXGAgMoB9Oqcrg4tTiK6k3xE6es4RbHeMFKJwHBtHh0F6/s320/aerosmith1.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Aerosmith</td></tr>
</tbody></table>Temos dois links para essa imagem. O primeiro link, em vermelho, é do Picasa, note que há um código nela, s1600, isso quer dizer que a imagem foi hospedada no Picasa com um comprimento de 1600px (De novo, esse é o comprimento máximo de qualquer imagem hospedada no Picasa!)
O segundo link, em verde, mostra o redimensionamento feito para postá-la no Blogger, s320, isso significa que o comprimento foi redimensionado pra 320px. E a largura, Cidão? bem, matematicamente está implícito que também foi redimensionada, pura proporção matemática (de novo), de 1913 x 1500 >> 1600 x 1255 >> 320 x 250! Isso não é mágica, é apenas matemática!!!
Automaticamente, o Blogger oferece quatro opções de redimensionamento mais o original, quando clica-se com o mouse por cima da imagem:
- Small (pequeno): 200 x 156
- Medium (médio): 320 x 250
- Large (grande): 400 X 312
- X-Large: (muito grande)640 x 499
- Original Size: Dá o tamanho original da imagem.
Para alguns, como eu, estas dimensões são insuficientes, logo você então pode redimensionar manualmente o tamanho de suas imagens de duas maneiras, caso as quatro opções dadas no editor de posts (Um detalhe, uso o editor de posts novo do Blogger in Draft!) não seja do seu agrado:
1 - Apagar o código [s+número] no segundo link, e com ajuda de um editor de imagens (photoshop, photofiltre, gimp, etc), obter o comprimento e largura para a dimensão que você quer. Aqui no Blog, sempre coloco as imagens com comprimento de 540px (a largura da área de postagem é de 610px), assim o código acima fica:
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmE4XYzNrqYDYEV95dc5YdwUG7KAKrWix8XcYoajXupsa1oXoh3A2fY9S0vBcSThFxeYXYuYRK6BLFLD1creoRvpPoXGAgMoB9Oqcrg4tTiK6k3xE6es4RbHeMFKJwHBtHh0F6/s1600/aerosmith1.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="423" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmE4XYzNrqYDYEV95dc5YdwUG7KAKrWix8XcYoajXupsa1oXoh3A2fY9S0vBcSThFxeYXYuYRK6BLFLD1creoRvpPoXGAgMoB9Oqcrg4tTiK6k3xE6es4RbHeMFKJwHBtHh0F6/" width="540" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Aerosmith</td></tr>
</tbody></table>Em laranja, estão os parâmetros que dão o comprimento (width) e a altura (height) da imagem.
2 - Apagar os parâmetros width e height, e alterar o código [s+número] para o tamanho que você quer, que no meu caso fica s540:
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmE4XYzNrqYDYEV95dc5YdwUG7KAKrWix8XcYoajXupsa1oXoh3A2fY9S0vBcSThFxeYXYuYRK6BLFLD1creoRvpPoXGAgMoB9Oqcrg4tTiK6k3xE6es4RbHeMFKJwHBtHh0F6/s1600/aerosmith1.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmE4XYzNrqYDYEV95dc5YdwUG7KAKrWix8XcYoajXupsa1oXoh3A2fY9S0vBcSThFxeYXYuYRK6BLFLD1creoRvpPoXGAgMoB9Oqcrg4tTiK6k3xE6es4RbHeMFKJwHBtHh0F6/s540/aerosmith1.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Aerosmith</td></tr>
</tbody></table>Tanto no primeiro quanto no segundo caso, a imagem fica redimensionada assim (540 x 423):
|
| Aerosmith |
Agora um conselho, nunca force uma imagem para ficar quadrada (lados iguais) usando os parâmetros width e height, ela ficará distorcida e não agradável ao olhos de quem a vê. Mas isso é assunto para outro post, já que escrevi demais neste!
That`s all folks!!!
