Abelhudos da informática

Um blog onde você encontrará curiosidades, dicas, tutoriais e notícias sobre informática

Como Controlar/Alterar o Tamanho das Imagens nas Postagens do Blogger



A todos vocês que utilizam o Blogger e não gostam da forma de inserir imagens, mas gostaria de  poder delimitar ou modelar o  tamanho das suas imagens, aí vai essa dica.

Primeiramente, sugiro que você use o  Picasa do Google para postar as suas imagens. Você até verá que o  Picasa  tem vínculo com o Blogger; ou seja, se você já upload de algo no blogger, aparecerá no Picasa.

Depois de ter aberto o  Picasa e ter selecionado o álbum onde se deseja colocar as imagens, faça o upload das mesmas.

Entre na página do seu post ou então crie uma nova postagem (rascunho) para aprender com o exemplo.

Na parte de edição das postagens do seu blog, entre as opções ESCREVER e HTML, escolha HTML.

Você usará o seguinte código para dimensionar, a seu gosto, a sua imagem:

<img alt="Nome/Descrição da sua imagem" src="Url da imagem" style="height: xxpx; width: xxpx;" />

- A parte destacada de roxo é onde se define o tamanho de sua imagem. XX equivale ao número a ser definido para o tamanho da sua imagem.
- Em src você definirá (dentro das aspas) a url da sua imagem do picasa. No caso, é só colar o link da imagem dentro das aspas de src.
- Os valores height e width corresponde a largura e altura, sendo que height é altura e width, largura.


Exemplo1:

<img alt="Nome/Descrição da sua imagem" src="url da imagem" style="height: 50px; width: 500px;" />

Segue abaixo a imagem como fica sendo exibida.


Como Controlar/Alterar o Tamanho das Imagens nas Postagens do Blogger


Exemplo2:

<img alt="Nome/Descrição da sua imagem" src="Url da imagem" style="height: 70px; width: 200px;" /> 




Como Controlar/Alterar o Tamanho das Imagens nas Postagens do Blogger




Obviamente, você também vai querer saber como colocar essa mesma imagem na posição onde deseja; pois, usando a opção de edição do próprio Blogger para centralizar ou justificar, você fará que a imagem apareça desordenadamente.

Use, antes do código de exibição da sua imagem, a parte vermelha do código:

<div style="text-align: center;"><img alt="Nome/Descrição da sua imagem" src="Url da imagem" style="height: 70px; width: 200px;" />

Onde, à frente de text-align, você define:
center = Centralizado; left = Esquerda; right = direita; justify = Justificado.

Exemplo:

Como Controlar/Alterar o Tamanho das Imagens nas Postagens do Blogger






Aqui vai uma dica para poder copiar a sua imagem do Picasa de maneira agradável:

Quando você for exibir a sua imagem no Picasa, você notará que ele a exibirá uma janelinha que limita o tamanho da sua imagem, não sendo a dimensão dela quando você fez o upload.
Vamos supor que você queira postar uma imagem de 1200x1200, mas o picasa exibe ela como 600x600. Supostamente, a imagem ficaria com a qualidade menor quando você colocasse o link a mesma na parte src do código da imagem usada nesse post.
O que fazer?

- Clique com o botão direito sobre a foto exibida  na referida janela do Picasa.

- Será exibida uma página contendo somente sua imagem. Repare no link dela. Você notará que no seu final terá um código com um número que define o tamanho da imagem na sua exibição. Por exemplo: "/s400/Farejando.gif". Esse "s400" define o tamanho geral dela. 

- Mude para um número que você acha que fique adequado à qualidade que você deseja. Por exemplo: /s600/Farejando.gif

Veja os resultados.

Exemplo1: s200.


Exemplo1: s600.


- Ao mudar esse número referente ao link e depois de ter colocado o tamanho de sua preferência, cole o link completo em src. Assim, você não terá problema de percas de qualidade. (eu sempre jogo um tamanho um pouco maior do que o da "forma" da foto. Ex: heigth 50px width 400px, eu coloco no link do picasa s600.).

  
Essa dica é de bastante utilidade, pois nem sempre as configurações padrões do Blogger permitem que a  imagem seja exibida da maneira que foi configurada na edição da postagem. Ouvi dizer também que isso torna o carregamento da página do seu blog mais rápido nos navegadores, uma vez que ele não terá que interpretar o tamanho da imagem, já que você definiu "manualmente".


Fica também a sugestão do uso do programa KompoZer, que é um ótimo editor de html. Ele irá gerar os códigos para você quando você redimensionar nele as imagens.


Marcadores: