Como deixar imagem inclicável no Blogger

sexta-feira, 12 de novembro de 2010

Como deixar imagem inclicável no Blogger

14:03 Por Marcelo Blogger, Hacks e Dicas 12 comentários

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.

Trabalhando com o Editor Antigo

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

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

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!

ANA CAROLINA RIBEIRO DOS SANTOS28 de novembro de 2010 às 11:02
NAÕ ESTOU CONSEGUINDO. APARECE A SEGUINTE MENSAGEM:
Seu HTML não pode ser aceito: Closing tag has no matching opening tag: A
ResponderExcluir
Respostas
ANA CAROLINA RIBEIRO DOS SANTOS28 de novembro de 2010 às 11:06
Consegui. Não havia retirado o finalzinho em vermelho. Parabens pela simplicidade das dicas.
ResponderExcluir
Respostas
Marcelo28 de novembro de 2010 às 18:23
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
Respostas
F.D.6 de dezembro de 2010 às 11:34
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
Respostas
Marcelo6 de dezembro de 2010 às 16:43
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
Respostas
Claudiney26 de fevereiro de 2012 às 09:52
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
Renderend18 de outubro de 2012 às 16:53
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
Unknown22 de março de 2013 às 19:37
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