Dicas, truques, tutoriais, reviews, promoções e informação

sexta-feira, 12 de novembro de 2010

Como deixar imagem inclicável no Blogger

Muitos blogueiros preferem que suas imagens upadas nos posts não fiquem clicáveis, ou seja, que a pessoa não consiga clicar na mesma para abrí-la em uma nova guia/janela. Isso, por vários motivos. O principal é fazer com que a imagem não seja copiada ou baixada, ou simplesmente para não poluir muito o post.

Se você deseja tornar uma imagem inclicável em seus posts, apresento aqui um método infalível para isso.

Como deixar uma imagem inclicável

A dica é extremamente simples, e dependerá somente do tipo de editor que você utiliza — se é o editor antigo ou o editor novo (atualizado) do Blogger. No entanto, há um método eficaz para qualquer um dos editores. Para conferir qual é o editor que você está utilizando, basta ir em Configurações > Básico, descer a barra de rolagem até o final da página, e verificar em Configurações globais.


imagem-nao-clicavel-blog
Trabalhando com o Editor Antigo

Ao realizar um novo post, upe a sua imagem normalmente. Após o upload, clique na guia Editar HTML.

blogger-deixar-imagem-inclicavel

Observe que o código HTML de sua imagem será parecido com este abaixo (no caso do editor antigo)

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_bjTRo_JfXRc/TN1fAUeHJkI/AAAAAAAAAdE/BpNgHFtzbR4/s1600/imagem-1.PNG"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 320px; height: 38px;" src="http://4.bp.blogspot.com/_bjTRo_JfXRc/TN1fAUeHJkI/AAAAAAAAAdE/BpNgHFtzbR4/s320/imagem-1.PNG" alt="como-postar-imagem-nao-clicavel" id="BLOGGER_PHOTO_ID_5538687575835223618" border="0" /></a>


O que deixa a imagem clicável é o código em vermelho acima mostrado. O importante do código é o texto que está em azul.

Remova a parte em vermelha do código e pronto! Sua imagem não será clicável.

Trabalhando com o Editor Novo (Atualizado)

Ao realizar um novo post, upe a imagem normalmente. Após o upload, clique na guia Editar HTML.


Observe que o código de sua imagem será parecido com este abaixo (no caso do editor novo):

<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/_bjTRo_JfXRc/TN1g_SmxtsI/AAAAAAAAAdM/5vxIptt77Jw/s1600/imagem-1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="37" src="http://1.bp.blogspot.com/_bjTRo_JfXRc/TN1g_SmxtsI/AAAAAAAAAdM/5vxIptt77Jw/s320/imagem-1.PNG" width="320" /></a></div>

Basta remover a parte em vermelho do código acima e sua imagem ficará inclicável.

Informação Adicional

Se você estiver com o editor antigo, e configurar a imagem para tamanho grande, o código será diferente. Ele começará com "<a href". Entretanto, em ambos os editores, para a imagem ficar inclicável ela deve começar por "<img".

Diferença

Imagem Clicável

blogger-imagem-clicavel
Imagem Inclicável



Conclusão Final


Não se preocupe em remover as áreas em vermelho dos códigos, o importante é o que está em azul. Remover o código vermelho não deixará sua imagem desconfigurada, inutilizada ou algo do tipo.

Apenas a deixará de uma maneira que o usuário não será capaz de clicar sobre ela.

Qualquer dúvida é só postar nos comentários!

12 comments:

  1. NAÕ ESTOU CONSEGUINDO. APARECE A SEGUINTE MENSAGEM:
    Seu HTML não pode ser aceito: Closing tag has no matching opening tag: A

    ResponderExcluir
    Respostas
    1. Ocorreu comigo também, mas ignorei e deu certo!

      Excluir
  2. Consegui. Não havia retirado o finalzinho em vermelho. Parabens pela simplicidade das dicas.

    ResponderExcluir
  3. Oi Ana Carolina

    Que bom que conseguiu.

    Se quiser, você pode pedir um tutorial para nós. Basta seguir o link abaixo:

    http://www.seututorial.com/p/peca-ja-o-seu-tutorial_29.html

    Abraços

    ResponderExcluir
  4. Esse código funciona com a primeira imagem da postagem. Mas e se a postagem tiver mais do que uma imagem? Tipo, uma imagem, aí vem um texto, e depois outra imagem. O código da segunda imagem, não é igual a esse primeiro. E no caso, procedendo dessa forma, ele retira apenas a opção clicável da primeira imagem, mas a segunda continua. - Não sei como resolver isso, mas gostaria que todas as imagens das postagens ficassem sem opção de serem clicadas.

    ResponderExcluir
  5. Olá F.D

    Se você puder postar o link de uma imagem como você diz, facilitaria para a gente.

    Não consegui encontrar uma imagem do tipo: imagem / texto / imagem.

    Abraços

    ResponderExcluir
  6. Muuuito útil suas informações! Ha um tempão busco resolver isso! Em alguns casos a imagem desalinhou com o texto, mas bastou realinhar. Valeu mesmo!!!

    ResponderExcluir
    Respostas
    1. Obrigado Claudiney, fico feliz que tenha sido útil para ti.
      Grande abraço

      Excluir
  7. Existe um modo mais fácil ainda. Após o Upload da imagem é só selecionar ela, e clicar no menu onde está escrito "LINK" e ela ficará inclicável. Tenho uma dúvida e como deixar a imagem de um modo que não dê para arrastar ela para os lados? Ou um modo que não dê para salvar a imagem, se não estiver compreeendendo bem vou citar um exemplo: quando visitamos um blog do Blogger: http://www.templateparablogspot.com/
    da para ver que a imagem onde ta escrito "TEMPLATES PARA BLOGGER" está inclicável e não nem para salvar, arrastar... eu gostaria de fazer isto em meu blog.

    ResponderExcluir
    Respostas
    1. Na época em que postei esse tutorial ainda não existia essa opção de "Link". Esse recurso entrou quase recentemente. Veja que o tutorial é de 2010, embora funcione perfeitamente ainda.

      Quanto a sua dúvida, se observar aqui no meu blog, a imagem do cabeçalho que eu coloquei (Seu Tutorial) também não pode ser baixada. Para que isso seja possível, é preciso que você insira a imagem como cabeçalho do seu blog, diretamente no header-wrapper do seu template.

      Excluir
  8. Boa noite!
    Não deu certo no meu blog.
    Na pagina do Portfólio, tem muitas fotos, se tiro de uma foto, o código se cria na foto anterior que foi criada.
    Abraços

    ResponderExcluir
    Respostas
    1. Você está fazendo algo errado. A remoção deve ser exatamente como diz no tutorial.

      Agora, não entendi a parte "o código se cria na foto anterior"!?!

      Todas as fotos possuem esse código. Ou seja, você deve fazer isso em uma por uma.

      Acredito que esteja fazendo alguma coisa errada. Passe o código de qualquer foto do seu blog que eu faço a modificação para você ver.

      Abraços

      Excluir