Aclarar las fotos cuando el ratón pasa por encima en blogger
Por desgracia en blogger no hay tantos widgets como en wordpress y si queremos de vez en cuando añadir un elemento un poco mas dinámico a nuestro blog debemos usar el código para modificar cosas, por ejemplo este truco es para cuándo quieres que una imagen al pasar el ratón por encima se atenúe y crear así un efecto de movimiento.
Vamos a hacerlo primero para una sola foto a la que aplicaremos el efecto de aclarado a pasar el ratón por encima.
Primero en la entrada colocamos la imagen y debemos acordarnos del nombre con el cual la hemos subido por ejemplo yo lo he hecho con una foto de mi perro y la he titulado michi.jpg como se llama Mortadelo en casa lo llamamos michi.
Una vez subida la foto pasamos a la vista html para encontrar en el código la imagen… en este caso es muy fácil pero si es un post amplio podéis usar control+f y abajo a la izquierda se abre una ventana de búsqueda poned el nombre de la foto y ya la tenemos localizada.
Una vez la tenemos localizada debemos añadir un poco de código javascript para que acceda a las propiedades del objeto imagen:
La propiedad opacity va desde 1 que es opaco hasta 0 si queremos un valor intermedio el 0.5 está bien, la transparencia la da el filtro alpha en este caso va desde 100 que no es transparente a 0 transparente en este caso he puesto 50, ojo hacer una prueba primero y antes de manejar el código de la plantilla os aconsejo que leáis este consejo: Cambiar tu blog sin sustos
[code]onmouseout="this.style.opacity='1';this.filters.alpha.opacity='100';" onmouseover="this.style.opacity='0.5';this.filters.alpha.opacity='50';"[/code]
El resultado es este para aclarar las fotos que te interese aclarar, es importante saber que con este método no vas a atenuar todas las del blog pero si las que mas te interesen.
Si queréis ver el experimento en vivo y ver como se atenúa la imagen en el sandbox de los experimentos podéis echar un ojo.
Y que pasa si quieres cambiarlo en todo el blog? también se puede pero en la plantilla, eso significa que aplicarás este efecto de rollover a todas las imágenes del blog sin excepción: cabeceras, separadores, anuncios.. y no sé si será en realidad muy práctico.
Vamos a plantilla diseño y elegimos añadir css
Ahora sólo debemos añadir este poco de código:
[code].post-body img:hover {
opacity:0.4;
border:2px;
}[/code]
Así lograrás que todas las imágenes del blog se cambien de una vez.
