Muitas vezes queremos por uma imagem no post, e ela poderá ser ofensiva para seus leitores (uma mulher nua, para alguns, é o fim do mundo!). Foi pensando nisso que acabei encontrando uma solução para postar determinadas imagens em um outro blog meu. É um código javascript bem simples, diretamente no post. Basta apenas fazer umas mudanças nos códigos das imagens postadas no Blogger (O tutorial abaixo foi feito pensando na plataforma Blogger, que eu adoro. Deve servir para as outras, eu disse deve!).Vamos fazer de conta que a imagem abaixo seja ofensiva (ultimamente, o politicamente correto está dando muita dor de cabeça...), e você não quer que ela apareça diretamente no post:
Vamos precisar de uma outra imagem, aquela que realmente vai aparecer no post, contendo um aviso que ela é imprópria ou NSFW. Vou usar como exemplo, a que eu fiz para o "Dorgas on Fire!" neste post (Aliás, teste o efeito que é bem simples.):
Faça uma imagem de aviso que você pode hospedar em qualquer servidor de imagens. Caso você use o Picasa, lembre-se que no código fornecido vem dois links, um com o endereço do servidor com dimensão máxima de 1600px e a outro com a dimensão usada no post. Neste caso, pode-se eliminar o primeiro link e deixar apenas o segundo, já que essa imagem terá que ser clicada para aparecer a outra. Na verdade, essa imagem atuará como um link falso, que ao ser clicada, fará aparecer a imagem escondida.
Como fazer uma imagem com um link falso:
- Eis abaixo o código da imagem aviso.jpg:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2G23GqtCpyPSOUL1t9yF-DeE077jDJ_3FmgcyC2hwSxaJh1_iUmBRyDlHJ4Ucdr_rF7IlpEzKWQ21QJ0UsXgRnTDZyLm-AO6Zf4udnVvVpDLgO_ICUe6hIrM63JVPlosr1o2JrA/s1600/aviso.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2G23GqtCpyPSOUL1t9yF-DeE077jDJ_3FmgcyC2hwSxaJh1_iUmBRyDlHJ4Ucdr_rF7IlpEzKWQ21QJ0UsXgRnTDZyLm-AO6Zf4udnVvVpDLgO_ICUe6hIrM63JVPlosr1o2JrA/s500/aviso.jpg" /></a></div>- Eliminar o link do servidor, deixando apenas o link da imagem propriamente dita:
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2G23GqtCpyPSOUL1t9yF-DeE077jDJ_3FmgcyC2hwSxaJh1_iUmBRyDlHJ4Ucdr_rF7IlpEzKWQ21QJ0UsXgRnTDZyLm-AO6Zf4udnVvVpDLgO_ICUe6hIrM63JVPlosr1o2JrA/s500/aviso.jpg" /></div>- Agora vamos acrescentar o código em javascript abaixo:
<span onclick="if(document.getElementById('IMAGEM').style.display=='none') {document.getElementById('IMAGEM').style.display='block';} else {document.getElementById('IMAGEM').style.display='none';}">- Ele deve ser colocado entre a div e o link da imagem como se segue:
<div class="separator" style="clear: both; text-align: center;">
<span onclick="if(document.getElementById('IMAGEM').style.display=='none') {document.getElementById('IMAGEM').style.display='block';} else {document.getElementById('IMAGEM').style.display='none';}" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2G23GqtCpyPSOUL1t9yF-DeE077jDJ_3FmgcyC2hwSxaJh1_iUmBRyDlHJ4Ucdr_rF7IlpEzKWQ21QJ0UsXgRnTDZyLm-AO6Zf4udnVvVpDLgO_ICUe6hIrM63JVPlosr1o2JrA/s500/aviso.jpg" /></span></div>Pronto, você tem uma imagem de aviso de conteúdo não recomendável com um link falso, que deve ser sempre colocada quando você quiser postar uma imagem imprópria. Guarde esse código acima em um bloco de notas ou até mesmo em um rascunho de post. Sempre que precisar, você faz um [control C + control V].
Como esconder a imagem no post
- Faça sempre no modo Editar HTML do seu editor de texto!
- Suba a imagem imprópria no editor. Eis abaixo como fica o código do Blogger:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB4u_7RPRJkLok9L_Arhbma1MxE1PcrpVjhyphenhyphenPhJJUjDpm9BvBsiLkLCW-wFbXBZzuSFZxAyw-jrWMF06hu1MSu3zkT3QATjGv8AWlfF4HjEBdftlwQBITB-RqJRHcw0-dacKphdQ/s1600/DSC05016.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB4u_7RPRJkLok9L_Arhbma1MxE1PcrpVjhyphenhyphenPhJJUjDpm9BvBsiLkLCW-wFbXBZzuSFZxAyw-jrWMF06hu1MSu3zkT3QATjGv8AWlfF4HjEBdftlwQBITB-RqJRHcw0-dacKphdQ/s500/DSC05016.JPG" /></a></div>- No segundo link da imagem, acrescentamos os atributos id e display:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB4u_7RPRJkLok9L_Arhbma1MxE1PcrpVjhyphenhyphenPhJJUjDpm9BvBsiLkLCW-wFbXBZzuSFZxAyw-jrWMF06hu1MSu3zkT3QATjGv8AWlfF4HjEBdftlwQBITB-RqJRHcw0-dacKphdQ/s1600/DSC05016.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" id="IMAGEM" style="display: none;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB4u_7RPRJkLok9L_Arhbma1MxE1PcrpVjhyphenhyphenPhJJUjDpm9BvBsiLkLCW-wFbXBZzuSFZxAyw-jrWMF06hu1MSu3zkT3QATjGv8AWlfF4HjEBdftlwQBITB-RqJRHcw0-dacKphdQ/s500/DSC05016.JPG" /></a></div>- Acima desta, coloque a imagem de link falso, descrita antes, ficando assim:
<div class="separator" style="clear: both; text-align: center;">
<span onclick="if(document.getElementById('IMAGEM').style.display=='none') {document.getElementById('IMAGEM').style.display='block';} else {document.getElementById('IMAGEM').style.display='none';}" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2G23GqtCpyPSOUL1t9yF-DeE077jDJ_3FmgcyC2hwSxaJh1_iUmBRyDlHJ4Ucdr_rF7IlpEzKWQ21QJ0UsXgRnTDZyLm-AO6Zf4udnVvVpDLgO_ICUe6hIrM63JVPlosr1o2JrA/s500/aviso.jpg" /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB4u_7RPRJkLok9L_Arhbma1MxE1PcrpVjhyphenhyphenPhJJUjDpm9BvBsiLkLCW-wFbXBZzuSFZxAyw-jrWMF06hu1MSu3zkT3QATjGv8AWlfF4HjEBdftlwQBITB-RqJRHcw0-dacKphdQ/s1600/DSC05016.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" id="IMAGEM" style="display: none;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB4u_7RPRJkLok9L_Arhbma1MxE1PcrpVjhyphenhyphenPhJJUjDpm9BvBsiLkLCW-wFbXBZzuSFZxAyw-jrWMF06hu1MSu3zkT3QATjGv8AWlfF4HjEBdftlwQBITB-RqJRHcw0-dacKphdQ/s500/DSC05016.JPG" /></a></div>Et voilà!!! Você tem uma imagem escondida. Quando o leitor clica na imagem de aviso, a imagem imprópria aparece. Clicando de novo, ela desaparece. Abaixo, veja como fica. Clique na imagem de aviso:
Em tempo, eu odeio javascript!
Um detalhe: Não fiz o teste para várias imagens, pois o id deve ser único (não pode haver dois ou mais ids iguais no CSS). A não ser que possa trocar o id por uma class, e ter um elemento no javascript do tipo getelementbyclass, pode isso Arnaldo?
