Efecto Hover 2 - En las imágenes de tus posts


Hola, hola mis chulas como les va el dia de hoy?!
Pues yo rondando por aquí en esta noche, para traerles una variante del tutorial anterior que les compartí sobre efecto hover en las imágenes de tus posts. Creo que este te gustara mucho porque es la combinación del efecto anterior con un código extra para agregar color a tus imágenes.

En lo personal a mi me encanta este efecto para los blogs que no tengan las entradas con la función de "Leer más.." activado. Si tu blog tiene las entradas completas pues este codigo te viene fenomenal, aunque para los gustos los colores, es cuestión de probar.

En lo personal no lo agrego por el formato de mi blog, pero el código como tal me encanta y lo recomiendo al cien por ciento pues el mismo queda muy bonito. Si yo no tuviera las entradas de mi blog acortadas, definitivamente, este sería el efecto hover que utilizaria.

A continuación una muestra del efecto en captura


ANTES

DESPUÉS

Como ves en las capturas anteriores, el antes es la imagen original del post, tal cual la subes a tu entrada así se visualizará la misma; y el después es cuando pasamos el cursor por encima de la imagen, ese es el efecto hover que tendrán las imágenes de tus posts si utilizas este código. Es recomendable no modificar el código si no sabes para que no lo dañes y te funcione correctamente.

RECUERDA: Recuerda igualmente hacer una copia de seguridad de tu código html antes de editar y él mismo, lo más práctico es seleccionando todo el código de tu plantilla y pegando el mismo en un blog de notas, por cualquier error que puedes cometer si no eres experto manejando códigos. Esto no deberia darte ningun problema, sin embargo la copia es para prevenir y salvaguardar tu plantilla tal como esta en caso de equivocarte.

Ahora sí, pasemos a trabajar..
Una vez la copia de seguridad hecha, procede a seguir cuidadosamente los siguientes pasos:

  • Primero nos dirigimos a Plantilla o Tema (Template - Theme) en blogger
  • Luego click en Editar html
  • Luego hacemos click dentro del código html
  • Y presionamos CTRL + F 
  • Se mostrará un mini buscador en la parte superior derecha dentro del recuadro del código
  • En dicho mini buscador pegamos pegamos lo siguiente: ]]></b:skin 
  • Y presionamos Enter en el teclado para buscar
  • Justamente encima de ]]></b:skin pegamos el siguiente código:

.post img { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .post img:hover { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-filter: blur(1.3px) saturate(2); color:#FF1493; }

Le das click en guardar cambios y listo!!
Si todo salió felicidades, sino, ve a tu plantilla nuevamente, selecciona todo el código html y borralo, luego pega el código previamente guardado y listo. Ahora es cuestión de ver que paso de lo explicado anteriormente saltaste, porque si sigues paso a paso lo indicado más arriba, no tiene porque darte problemas ni ningún error pues como ves en las capturas lo probé en este blog, justamente el tutorial anterior de efecto hover. Es cuestión de seguir bien los pasos, okis ;)

Ya sabes que cualquier duda en cuanto a este tutorial puedes dejarla con toda libertad en los comentarios de esta entrada, y a la mayor brevedad posible te respondere. No respondo a solicitud de ayuda de tutoriales en privado, asi que cualquier duda dejala pública en los comentarios del tutorial en cuestión.

Chicas pendiente porque traeré otra variante a este tutorial.. Bendiciones, y no olvides comentar si te fue de utilidad este tutorial. Gracias y feliz noche!!




Confía En Cristo • Tu Jardín De Fe
Vanessa Martinez © 2012-2018

No hay comentarios.:

Bendicenos con un comentario

๑ ALGUNOS PUNTOS A TENER EN CUENTA ๑
♣ ~~~~~~~~~~~~~~~~~~~~~~~~~~♣
❥ Un corazón agradecido siempre sabe decir gracias..
❥ Y la forma más fácil de decirlo es a través de tus comentarios..
❥ Al hacerlo se cordial, respetuoso y de bendición a los demás..
❥ Deja la URL de tu blog para que podamos visitarte..
❥ Para agregar un enlace activo en los comentarios VER COMO AQUÍ
❥ Para insertar una imagen solo utiliza [img]URL de la imagen[/img]
❥ Para insertar un vídeo solo utiliza [video]URL del video[/video]
❥ Para cambiar color de texto utiliza [color="red"]Aquí tu texto[/color]
❥ Para crear marquesina utiliza [ma]Aquí tu texto[/ma]
❥ Por favor NO COPY, y si tomas algo recuerda los créditos!
❥ Por último, dile NO al Spam.. SPAM BLOCKED
❥ Los comentarios pasan por un sistema de moderación.
❥ Por tanto, NO se aprobarán los comentarios:
• con textos árabes
• con propagandas (spam)
• con ofensas a personas, publicaciones o marcas
❤ Y recuerda que si te gusta lo que hacemos, tan solo..:
❤ Comparte + Síguenos + Comenta!!
❤ Observa + Procesa + Inspírate + Crea = OPIC • NO COPY
❤ BE•ORIGINAL

✿ TUS COMENTARIOS ALIMENTAN MI BLOG Y SON CARICIAS DE DIOS A MI ALMA ✿

≧◔◡◔≦ (っ◔◡◔)っ ♥ ❤ ❥ ✿ ☂ ❣ ღ ツ ☼ ✿◕ ‿ ◕✿ ❀◕ ‿ ◕❀ ❁◕ ‿ ◕❁ (◡‿◡✿) (っ◕‿◕)っ (►.◄) ╍●‿●╍ (•_•) (◐.̃◐) (。◕‿◕) ..^.^.. ʕ•ᴥ•ʔ .^◡^. (≧◡≦) (-^o^-) (*^o^*) (O_O) (ˇ~ˇ) ಠ_ಠ (-_-) ZZzzz εїз Ƹ̴Ӂ̴Ʒ ✿❀❁°•~♂♀✉✔♚♛✝© ® ™

Gracias por tu visita
¡Hola Corazón de Fe... Anímate a Comentar!
Pues me gustaría saber tu opinión sobre este tema. Dejanos saber si el mismo ha sido de utilidad o de bendición para ti, asi como tambien, que otros temas te gustaria que tratemos.
SOLO RECUERDA: No se permiten mensajes ofensivos o que falten al respeto, tampoco spam, están permitidas las URL siempre y cuando opines también sobre la entrada y que tu enlace no sea spam ni inadecuado, pues de lo contrario será eliminado dicho comentario. Si mi hija de 10 años no puede leerte o ver lo que compartes entonces tu comentario no es bienvenido aquí.
¡Si me sigues.. te sigo devuelta!
Excepto aquellos blogs con contenido inadecuado.

♥ A la mayor brevedad respondemos los comentarios

Copyright © 2012-2018 CONFÍA EN CRISTO || Theme Base ๑ GGEORGELYS || Deco-Style and Effects ๑ KOKO KAWAII