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.
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!
Qualquer dúvida é só postar nos comentários!

Artigo escrito por Marcelo
Sou formado em Sistemas de Informação pela UFMG e pós-graduado em Segurança da Informação. Trabalho com TI há mais de 5 anos e sou professor particular de inglês. Nas horas bem vagas costumo arranhar uma guitarra e sou fã do bom e eterno rock'n'roll.
Receba as atualizações automaticamente
NAÕ ESTOU CONSEGUINDO. APARECE A SEGUINTE MENSAGEM:
ResponderExcluirSeu HTML não pode ser aceito: Closing tag has no matching opening tag: A
Ocorreu comigo também, mas ignorei e deu certo!
ExcluirConsegui. Não havia retirado o finalzinho em vermelho. Parabens pela simplicidade das dicas.
ResponderExcluirOi Ana Carolina
ResponderExcluirQue 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
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.
ResponderExcluirOlá F.D
ResponderExcluirSe 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
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!!!
ResponderExcluirObrigado Claudiney, fico feliz que tenha sido útil para ti.
ExcluirGrande abraço
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/
ResponderExcluirda 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.
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.
ExcluirQuanto 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.
Boa noite!
ResponderExcluirNã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
Você está fazendo algo errado. A remoção deve ser exatamente como diz no tutorial.
ExcluirAgora, 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