Efecto aparecer y desvanecer imágenes en nuestro blog

Vamos a mostraros como podemos hacer que nuestras imágenes, realicen un efecto de desvanecer y aparecer cuando se pasa el cursor por encima.
Para ello tenemos que editar nuestra plantilla desde el HTMl.

Yo siempre recomiendo hacer una copia de seguridad de nuestra plantilla cada vez que vallamos a modificar el HTML Puedes ver como se hace paso a paso en éste post.

Efecto aparecer la imagen al pasar el cursor.

Podemos elegir entre:
Hacer que todas las imágenes de nuestro blog realicen esta función .
Para ello elegimos este código

Detalles

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('img').fadeTo('slow', 0.5);
$('img').hover(function() {
$(this).fadeTo('slow', 1.0);
}, function() {
$(this).fadeTo('slow', 0.5);
});
});
</script>

También podemos elegir las imágenes que queremos que hagan esta función para ello usamos este otro código

Detalles

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('.blImagjtef').fadeTo('slow', 0.5);
$('.blImagjtef').hover(function() {
$(this).fadeTo('slow', 1.0);
}, function() {
$(this).fadeTo('slow', 0.5);
});
});
</script>

Efecto desvanecer la imagen al pasar el cursor.

Al igual que el anterior podemos usar este código para que todas las imágenes de nuestro blog hagan la función de desvanecer cuando pasamos el cursor.
Para ello elegimos este código

Detalles

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('img').fadeTo('slow', 1.0);
$('img').hover(function() {
$(this).fadeTo('slow', 0.5);
}, function() {
$(this).fadeTo('slow', 1.0);
});
});
</script>

También podemos elegir las imágenes que queremos que hagan esta función para ello usamos este otro código

Detalles

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>

$('.blImaggjtef').fadeTo('slow', 1.0);
<script type='text/javascript'>
$(document).ready(function() {
$('.blImaggjtef').hover(function() {

</script>
$(this).fadeTo('slow', 0.5);
}, function() {
$(this).fadeTo('slow', 1.0);
});

});

Insertar el código en nuestra plantilla

Para insertar el código en nuestra plantilla solo tenemos que irnos a Tema > Editar HTML

Buscamos </head> y justo antes aplicamos el código elegido

Nota

Si hemos escogido la opción de elegir las imágenes en nuestro blog, debamos de insertar estos códigos en la entrada que queramos:

<img class='blImagjtef' src='URL DE LA IMAGEN'/>

<img class='blImaggjtef' src='URL DE LA IMAGEN'/>

El primer caso es para la opción de aparecer la imagen
y el segundo caso es para la opción de desvanecer.

Cambiamos lo marcado en rojo por la URl de nuestra imágen.

Guardamos y listo.