Como publicar imagens no Blogger

Uma das várias diferenças entre o Blogger e o Wordpress está na publicação de imagens. Ao inserir uma imagem no Wordpress você tem as opções de miniatura linkada ou no tamanho original com ou sem link.

Já no Blogger não temos muitas opções. Caso as imagens tenham mais que 400 pixels de largura, são invariavelmente redimensionadas e também é incluído um link para a imagem original.

Isso é um problema, pois quando o leitor clica sobre na imagem é direcionado para uma nova página com a mesma imagem em tamanho original e fora do seu blog!

Uma solução que não exige muito esforço é linkar a imagem para outro local e assim "matar" o link original criado automaticamente. Um exemplo dessa abordagem pode ser visto a seguir:


Link para imagem original substituindo por outro destino.

Como inserir imagens sem link

Mas e quando você quer apenas ilustrar um artigo sem linkar para lugar nenhum? Ai meu amigo só tem um jeito: Editar o código HTML, mas não se assuste, é bem fácil e depois de fazer algumas vezes você acaba pegando o jeito.

Para testar vamos incluir uma imagem em um novo artigo. Selecione uma imagem, escolha o layout nenhum e faça o upload da imagem. Ela vai aparecer, invariavelmente, no início do artigo.

Depois de concluir a publicação da imagem clique em Editar Html no canto direito do cabeçalho da área de edição do artigo, será então apresentado o seguinte código HTML:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://URL_DA_IMAGEM/Imagem.jpg"><img style="cursor: pointer;" src="http://URL_DA_IMAGEM_MENOR/s400/Imagem.jpg" alt="" id="BLOGGER_PHOTO_ID_5152735375509908690" border="0" /></a>
Agora por partes, vamos decompor todo o código acima, que corresponde a imagem que adicionamos:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://URL_DA_IMAGEM/Imagem.jpg">

<img style="cursor: pointer;"
src="http://URL_DA_IMAGEM_MENOR/s400/Imagem.jpg"
alt="" id="BLOGGER_PHOTO_ID_5152735375509908690" border="0"
/>

</a>
Os trechos destacados em vermelho, que correspondem ao link para a imagem em tamanho original, podem ser removidos. O resultado será o código abaixo:
<img src="http://URL_DA_IMAGEM_MENOR/s400/Imagem.jpg"/>
E a imagem aparecerá assim, sem link ou cursor:


Link para imagem original removido.

Como fazer miniaturas ou previews

Há ainda outro caso, que é quando você quer mostrar apenas um preview da imagem, linkada para uma imgem completa, como nesse caso:


Link para imagem completa

Para fazer isso, você precisará subir duas imagens, uma completa e outra parcial. Depois de subir as duas fotos, remova o link da foto parcial, conforme o exemplo anterior. Clique em Vizualizar e copie o destino do link da imagem completa.

Clique em Ocultar visualização e crie um link sobre a imagem parcial apontando para o destino da imagem completa copiado no passo anterior, apague a imagem completa do artigo e está pronto.

Comentários

  1. Por isso, passei a usar o Imageshack!

    Abraços.

    ResponderExcluir
  2. É uma opção Thiago, mas eu prefiro, na medida do possível, deixar tudo num serviço só, ou pelo menos, em serviços da mesma empresa.

    ResponderExcluir
  3. boas, e não tens uma dica de como não ter de retirar o link de cada vez que faça o upload de uma imagem?
    Ou seja, a foto só ter apenas o cursor?

    ResponderExcluir
  4. Sei não 1/2 Kilo... Mas mas se você descobrir me avisa, tá?

    []'s
    Compulsivo

    ResponderExcluir
  5. "linkada para uma imgem completa" corrige se desejar para imagem ;) (Post construtivo) lol

    Já tinha reparado qe as suas imagens nem o cursos da mao aparecia, felizmente encontrei este post!

    Cumps

    ResponderExcluir
  6. Olá ...

    Obrigada pela dica ... vou testar agora!!!
    Valeu!!!

    Bjos

    ResponderExcluir
  7. Obrigado pela dica que dentre outras tem me ajudado muito na construção de meu blog.
    Mesmo já tendo um conhecimento razoável (não é meu primeiro blog), sempre aprendo algo novo no Usuário Compulsivo.

    Quando puder dê uma passa pra conhecer.

    Mais uma vez obrigado!

    ResponderExcluir
  8. uhuuuuuuu adorei a dica ;)

    ResponderExcluir
  9. Olá,

    Esse lance de tirar o link eu até já conseguia fazer antes, mas uma coisa que não consigo fazer é colocar a imagem original em um post no blogger, sabe como posso fazer isso?

    Valeu!

    ResponderExcluir
  10. Eu não consigui fazer, não consigo usar o códico, fica como não existisse uma imagem! :(

    ResponderExcluir
  11. Oi fiz um blogspot acho que fiz tudo certo,mas na hora em que procuro as fotos no google imagens não consigo ver,o mesmo acontece no google pesquisa ,sera que estou colocando as fotos do modo certo.
    Se vc pode me ajudar.

    ResponderExcluir
  12. Valeu! Funciona perfeitamente!

    ResponderExcluir
  13. Oi que postar uma charge no blog, pra ser visualizado direto, como faço?

    ResponderExcluir

Postar um comentário

Postagens mais visitadas deste blog

Nomes de todas as igrejas do Brasil

O que significa DVDRip, DVDScr, R5, etc?

Remover idiomas em arquivos Dual Audio