Dicas e Truques com Imagens no Blogger

Vamos mostrar diversas alterações que podemos fazer com as imagens postadas no Blogger apenas alterando a url da imagem, ou seja, mudando o endereço da imagem publicado no blogspot.

Quando você faz uma postagem e publica uma imagem no Blogger você pode usar varias funções como mudar o tamanho da imagem, fazer miniatura, cortar partes da imagem ou fazer imagens com formato de circulo apenas trocando o endereço da imagem.

Alterar Imagens de Blog

Então na pagina que faz a postagem você pode ver o HTML e endereço da imagem clicando na guia HTML.

Dicas e Truques com Imagens no Blogger

Vamos usar como exemplo uma imagem que publicamos em nosso outro site de frases, façam uma visita clicando na imagem abaixo.

Se você traçar metas absurdamente altas e falhar, seu fracasso será muito melhor que o sucesso de todos


O código html desta imagem é:
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRFbZwWE_ZlZhYi5zqugJB3xTrPUqbNdcizJPWUIWz801MjM8ii9cXy0iR3ygVL1fFQuibPQj6D3M14M5ZiamgiG-69MGQFo-imtKkY68XVoFBR_0VjQyBdEsZWs0utZ4NQyMTaU_1jbG2/s1600/reflexao-motivacao.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1600" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRFbZwWE_ZlZhYi5zqugJB3xTrPUqbNdcizJPWUIWz801MjM8ii9cXy0iR3ygVL1fFQuibPQj6D3M14M5ZiamgiG-69MGQFo-imtKkY68XVoFBR_0VjQyBdEsZWs0utZ4NQyMTaU_1jbG2/s400/reflexao-motivacao.jpg" width="400" /></a></div>

Deste código todo vamos usar o endereço da imagem para fazer modificações nesta foto publicada no blog:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRFbZwWE_ZlZhYi5zqugJB3xTrPUqbNdcizJPWUIWz801MjM8ii9cXy0iR3ygVL1fFQuibPQj6D3M14M5ZiamgiG-69MGQFo-imtKkY68XVoFBR_0VjQyBdEsZWs0utZ4NQyMTaU_1jbG2/s400/reflexao-motivacao.jpg

Sendo mais exato, nossas alterações serão aplicadas apenas no trecho /s400/, notem que as barras fazem parte do endereço da imagem, portanto quando for fazer qualquer alteração tenha cuidado pois uma letra ou sinal faltando não deixará a imagem aparecer.

Todos os códigos que vamos mostrar a seguir dizem respeito a essa imagem e o trecho /s400/. Caso precisa de ajuda para criar ou editar imagens veja aqui uma sugestão de site para Criar ou Editar Imagens Online.

Mudar o Tamanho da Imagem

Se quiser alterar o tamanho da imagem publicada poderá apenas mudar o valor 400, por exemplo:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRFbZwWE_ZlZhYi5zqugJB3xTrPUqbNdcizJPWUIWz801MjM8ii9cXy0iR3ygVL1fFQuibPQj6D3M14M5ZiamgiG-69MGQFo-imtKkY68XVoFBR_0VjQyBdEsZWs0utZ4NQyMTaU_1jbG2/s700/reflexao-motivacao.jpg

Assim a imagem usando /s700/ no endereço ficará com 700 px de largura, mas é claro funciona apenas se tamanho da imagem original que você publicou, ou seja, se a imagem que enviou para o Blogger tinha 700px de largura ou mais. Naturalmente para diminuir o tamanho da imagem sempre funciona, então pode usar 400, 200, 70... qualquer valor.

Definir a Altura da Imagem

Por padrão o Blogger usa a largura da imagem como padrão para definir o tamanho que a imagem aparece, mas se você quiser pode controlar o tamanho da imagem pela altura, trocando o s por h no endereço da imagem:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRFbZwWE_ZlZhYi5zqugJB3xTrPUqbNdcizJPWUIWz801MjM8ii9cXy0iR3ygVL1fFQuibPQj6D3M14M5ZiamgiG-69MGQFo-imtKkY68XVoFBR_0VjQyBdEsZWs0utZ4NQyMTaU_1jbG2/h250/reflexao-motivacao.jpg

Desta a imagem terá 250px de altura ( /h250/ ) e a largura será definida pelo Blogger mantendo a proporção da imagem.

Cortar e Fazer Imagem Quadrada

Podemos usar o código -c para deixar imagem quadrada e não importa se a imagem é retangular, o Blogger corta as laterais da imagem para que ela fique quadrada no tamanho que você escolher.

Por exemplo as imagens do Gadget Postagens Populares usam as imagens com o código s72-c. Veja algumas Dicas de Como Personalizar Gadget Postagens Populares.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRFbZwWE_ZlZhYi5zqugJB3xTrPUqbNdcizJPWUIWz801MjM8ii9cXy0iR3ygVL1fFQuibPQj6D3M14M5ZiamgiG-69MGQFo-imtKkY68XVoFBR_0VjQyBdEsZWs0utZ4NQyMTaU_1jbG2/s200-c/reflexao-motivacao.jpg


Corte Lateral da imagem


Também podemos usar o -p para fazer o corte mas neste caso a parte esquerda da imagem some para que a imagem fique quadrada. Exemplo: s200-p.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRFbZwWE_ZlZhYi5zqugJB3xTrPUqbNdcizJPWUIWz801MjM8ii9cXy0iR3ygVL1fFQuibPQj6D3M14M5ZiamgiG-69MGQFo-imtKkY68XVoFBR_0VjQyBdEsZWs0utZ4NQyMTaU_1jbG2/s200-p/reflexao-motivacao.jpg


Note que nesta imagem a parte direita da imagem aparece e o corte foi feito somente do lado esquerdo, ou seja, é uma miniatura da imagem diferente da anterior que foi cortada nos dois lados.

Como Adicionar Imagens Redondas


Adicionando -cc, as imagens ficam redondas. Na verdade é colocada uma mascara sobre a imagem para que fique no formato de um circulo. Exemplo s200-cc.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRFbZwWE_ZlZhYi5zqugJB3xTrPUqbNdcizJPWUIWz801MjM8ii9cXy0iR3ygVL1fFQuibPQj6D3M14M5ZiamgiG-69MGQFo-imtKkY68XVoFBR_0VjQyBdEsZWs0utZ4NQyMTaU_1jbG2/s200-cc/reflexao-motivacao.jpg


Alterar Cor de Fundo da Imagem


Com o código -rj-c0xffffff podemos escolher a cor de fundo em nossa imagem. Isto é útil para imagens transparentes, por exemplo em imagens no formato .png. Porém em imagens sólidas como a nossa .jpg está função é invisível.


Neste caso ficaria com fundo branco, mas como dissemos a imagem não tem transparencia portanto não é possível ver o efeito. Então vamos apenas publicar o exemplo do endereço da imagem com o código s200-rj-c0xffffff.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRFbZwWE_ZlZhYi5zqugJB3xTrPUqbNdcizJPWUIWz801MjM8ii9cXy0iR3ygVL1fFQuibPQj6D3M14M5ZiamgiG-69MGQFo-imtKkY68XVoFBR_0VjQyBdEsZWs0utZ4NQyMTaU_1jbG2/s200-c0x00ffffff-rj/reflexao-motivacao.jpg

Contudo ela pode ser utilizada junto com outros códigos que mostramos, por exemplo, o código para deixar a imagem redonda, neste caso com o código -cc-rj-c0xffff00, o endereço da imagem fica assim:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRFbZwWE_ZlZhYi5zqugJB3xTrPUqbNdcizJPWUIWz801MjM8ii9cXy0iR3ygVL1fFQuibPQj6D3M14M5ZiamgiG-69MGQFo-imtKkY68XVoFBR_0VjQyBdEsZWs0utZ4NQyMTaU_1jbG2/s200-c0x00ffff00-cc-rj/reflexao-motivacao.jpg


A cor da mascara da imagem (borda amarela) pode ser modificada. Veja que o código é -cc-rj-c0xffff00, esta parte final ffff00 é apenas o código CSS da cor amarela (Aqui tem uma lista com o Código das Cores), portanto você pode usar na cor que desejar para combinar ou destacar a imagem do fundo do seu blog.

Veja também: Como Fazer Efeitos em Fotos e Imagens do Blog com CSS

Espero que gostem destas opções de modificações e truques do Blogger com as imagens. Lembrando que todas essas imagens de exemplo são apenas variações da imagem original que mostramos no inicio da postagem. Abraços e boa sorte.

Marcadores: , , ,