Como arredondar, diminuir ou aumentar tamanho ou cortar as imagens do Blogger ou do Google+ sem usar CSS ou jQuery

Fazer imagens arredondadas como o avatar por exemplo é a maior raiva entre os blogueiros da era atual. Alterar a aparência geral do seu blog exige conhecimento e tempo, certo?. Atualmente, usamos CSS ou jQuery para fazer imagens arredondadas. Mas neste tutorial vou mostrar uma outra maneira de fazer imagens arredondadas que são carregadas no ou estão hospedadas no Blogger / Blogspot ou Google +.

O Blogger permite que os usuários hospedem imagens gratuitamente com largura de banda ilimitada, todas as imagens que enviamos no blogger são armazenadas no Google+ ou se você não tiver atualizado para o Google+, suas imagens serão armazenadas no Álbum da web do Picasa. Mas a maioria dos blogueiros já atualizam para o Google+ e as imagens podem ser encontradas em "Fotos". Em sua conta do Google+.

No blogger, temos a capacidade de redimensionar ou cortar imagens editando diretamente na URL da imagem. Qualquer imagem que você enviar do blogger, ele será automaticamente redimensionado para dimensões padrão do blogger que é de "1600 pixels". De ambos os lados, que é um tamanho original de uma foto que você carrega no seu blog. como um exemplo; Aqui eu enviei a imagem para o Blogger a URL da imagem hospedada no Blogger é...

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0pz030hyphenhyphenEFchfvhwAvRiU__bi43a_zmPFhLhQvmbxZgWpcjZ0rZejdXFIf7BCj_0L9A3YSOIWT7ePqg1Y26WZamDmwQI09Y8HH74r7oOHZSMxjECcm87Mzu4KNmd_uyUCOv7tvKT_H5oM/s1600/blogger-logo-icon-png-10.png

Na URL da imagem acima, procure o trecho antes do nome do arquivo, que é o tamanho da imagem s1600 e é a dimensão de blogger padrão. Agora, se você quiser que a imagem seja redimensionada com qualquer outra dimensão como 300 pixels por exemplo, então tudo o que você tem que fazer no URL da imagem é mudar "s1600" por "s300" e veja como o tamanho mudará clicando na URL abaixo:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0pz030hyphenhyphenEFchfvhwAvRiU__bi43a_zmPFhLhQvmbxZgWpcjZ0rZejdXFIf7BCj_0L9A3YSOIWT7ePqg1Y26WZamDmwQI09Y8HH74r7oOHZSMxjECcm87Mzu4KNmd_uyUCOv7tvKT_H5oM/s300/blogger-logo-icon-png-10.png

E agora o tamanho da imagem é 250px largura e altura correspondente à da imagem original. 
Junto com isso, o Blogger também oferece recorte de imagem, se você der um tamanho de imagem decidido, ele irá cortar automaticamente a imagem em ambos os lados e fazer uma imagem quadrada perfeita. Para cortar uma imagem, depois de alterar o tamanho da imagem, adicione no final do tamanho da imagem  s300-c  e veja como fica pré-visualizando a imagem abaixo clicando na URL:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0pz030hyphenhyphenEFchfvhwAvRiU__bi43a_zmPFhLhQvmbxZgWpcjZ0rZejdXFIf7BCj_0L9A3YSOIWT7ePqg1Y26WZamDmwQI09Y8HH74r7oOHZSMxjECcm87Mzu4KNmd_uyUCOv7tvKT_H5oM/s300-c/blogger-logo-icon-png-10.png

Agora vamos aprender como tornar as imagens do Blogger ou do Google+ redondas com este mesmo método

Para fazer imagens blogger redondas é muito fácil, tudo que você tem a fazer é cortar a imagem de 100% de todos os lados. Como você cortará a imagem 100% de todos o lados? Basta adicionar -cc ao final da URL da imagem no tamanho da imagem  s1600-cc assim. Veja a imagem abaixo:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0pz030hyphenhyphenEFchfvhwAvRiU__bi43a_zmPFhLhQvmbxZgWpcjZ0rZejdXFIf7BCj_0L9A3YSOIWT7ePqg1Y26WZamDmwQI09Y8HH74r7oOHZSMxjECcm87Mzu4KNmd_uyUCOv7tvKT_H5oM/s1600-cc/blogger-logo-icon-png-10.png

Você pode fazer a mesma coisa no perfil do Google+, na capa ou em qualquer outro URL da imagem do Google+. Desfrute!


Também há muitas coisas que você pode fazer com imagens de blogger como:

Para ver o URL original da imagem adicione -h depois do tamanho da imagem e ficará como este exemplo s1600-h adicionando isto você não precisará clicar na imagem para ver o tamanho original no ato que será aberto automaticamente será mostrado na web o seu tamanho original. 
No blogger você não precisa de um sitemap para ver as imagens, ele já tem um sitemap XML de cada imagem que você carrega no servidor do Google que você pode verificar adicionando -g no final do tamanho da imagem ficando assim s1600-g agora veja esses dois exemplos clicando nas URL's abaixo:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0pz030hyphenhyphenEFchfvhwAvRiU__bi43a_zmPFhLhQvmbxZgWpcjZ0rZejdXFIf7BCj_0L9A3YSOIWT7ePqg1Y26WZamDmwQI09Y8HH74r7oOHZSMxjECcm87Mzu4KNmd_uyUCOv7tvKT_H5oM/s1600-h/blogger-logo-icon-png-10.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0pz030hyphenhyphenEFchfvhwAvRiU__bi43a_zmPFhLhQvmbxZgWpcjZ0rZejdXFIf7BCj_0L9A3YSOIWT7ePqg1Y26WZamDmwQI09Y8HH74r7oOHZSMxjECcm87Mzu4KNmd_uyUCOv7tvKT_H5oM/s1600-g/blogger-logo-icon-png-10.png

Bom, basicamente é isso. Espero que seja de muita utilidade pra você este tutorial e facilite sua experiência com seu blog / site.
Até a próxima bloggers!