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.
Vamos usar como exemplo uma imagem que publicamos em nosso outro site de frases, façam uma visita clicando na imagem abaixo.
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.
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.
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.
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
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.
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
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.
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.
Vamos usar como exemplo uma imagem que publicamos em nosso outro site de frases, façam uma visita clicando na imagem abaixo.
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: Códigos, Efeitos, Html, Imagens