Puedes ver también este truco aplicado en mi página DIYs, así te doy otra idea de dónde puedes aplicar este truco !
Te explico el proceso, he subido mi foto clicando en el botón de la parte superior del post "inserta imagen", una vez hecho esto, me he ido a al pestaña "HTML" dónde he buscado y localizado el código de la foto en cuestión, en este caso sería :
<a href="http://4.bp.blogspot.com/-WTxN0LMFjLY/VPFf-8MFwcI/AAAAAAAAShA/RuZS9s9aFGI/s1600/Efecto-opacidad-fotos.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-WTxN0LMFjLY/VPFf-8MFwcI/AAAAAAAAShA/RuZS9s9aFGI/s1600/Efecto-opacidad-fotos.jpg" height="500" width="600" /></a>
¿ Por qué se que es ese el fragmento de código HTML perteneciente a la foto ? muy sencillo, no hay más que fijarse en lo que viene a continuación de src ( que no es más que la url de la foto ), observarás que al final de dicha url viene el nombre que le hayas dado a la foto en cuestión.
Bien, una vez hecho esto no hay más que sustituir el fragmento de código HTML que ya hemos localizado por el siguiente :
<a href="http://4.bp.blogspot.com/-WTxN0LMFjLY/VPFf-8MFwcI/AAAAAAAAShA/RuZS9s9aFGI/s1600/Efecto-opacidad-fotos.jpg" target="_blank"><img border="0" height="500" onmouseout="this.style.opacity=1;this.filters.alpha.opacity='70';" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity='50';" src=" http://4.bp.blogspot.com/-WTxN0LMFjLY/VPFf-8MFwcI/AAAAAAAAShA/RuZS9s9aFGI/s1600/Efecto-opacidad-fotos.jpg" width="600" /></a>
Muy importante : si copias y pegar que no se te olvide sustitutir el href y el src por el href y el src de tu foto. Y por supuesto, el height (alto de la foto ) y width ( ancho de la foto ) sino es el deseado, del cual ya hablamos en este otro post.
Otra cosa, puedes modificar la intensidad de la opacidad, para ello deberás de modificar el valor que viene a continuación de this.style.opacity=, es decir el 0.5, teniendo en cuenta que cuanto más pequeño sea este valor más opaca se volverá la foto al pasar el ratón sobre ella, y lógicamente cuanto mayor sea éste valor al contrario, es decir menos opaca se volverá la foto al pasar el ratón sobre ella.
¿ Qué te ha parecido el truco de hoy ?, ¿ ya lo habías probado ?,...
Quizá también te interese :
- Consejos de blogger a blogger
- Personalizar el tamaño de las fotos en blogger
- Cómo mejorar la estructura de tus posts