TUTO 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 lo siguiente que esta resaltado: ]]></b:skin  (haz CLICK AQUÍ para copiar esa línea de código, recuerda que no se puede copiar directamente en el blog por el sistema de copyright que hemos agregado al mismo)
  • Luego de pegar en el mini buscador la línea de código anterior, presionamos Enter en el teclado para buscar automáticamente la misma
  • Una vez la encuentres, 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; }

Tutos Koko Kawaii

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!!

Koko Kawaii
Conoce aquí a Koko Kawaii



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 ANTES DE COMENTAR๑
♣ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~♣

❥ 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..
❥ Sin embargo, los enlaces inapropiados serán bloqueados
❥ Para poder 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]
❥ Este blog cuenta con varios autores y un administrador
❥ Publicaciones de nuestra autoría llevarán nuestro nombre al final
❥ Con la fuerza de un oso y la ternura de un gato así es #miositopada
❥ NO COPIA, es creativo.. y si toma algo siempre da los créditos :)
❥ POR TANTO, DILE NO AL SPAM, BECAUSE HERE, SPAM BLOCKED
❥ Los comentarios en este blog pasan por un sistema de moderación
❥ Por tanto, NO se aprobarán los comentarios:
• con textos árabes
• con propagandas (spam)
• con mensajes sin sentido al tema publicado
• con promoción a la violencia o discriminación
• con enlaces a páginas inapropiadas o con violencia
• con ofensas a personas, razas, animales, publicaciones o marcas
❤ ¿Algún problema con eso? ... Somos Team RD ... #algunproblema
❤ El respeto ajeno es la paz.. Pero confrontar lo malo y el pecado es una necesidad :)
❤ Simplemente, si te gusta lo que hacemos, entonces revela tu corazón sin temor
❤ Comparte + Síguenos + Comenta = A dar por gracia lo que recibes
❤ Observa + Procesa + Inspírate + Crea = OPIC•NOW | #opicnow
❤ © NO COPY ® BE•ORIGINAL

ʕ•ᴥ•ʔ COMUNICADO IMPORTANTE ʕ•ᴥ•ʔ
Las publicaciones de terceros compartida en este blog serán acreditadas como corresponde, a no ser, que estén sin créditos donde la conseguimos y desconozca los mismos. Por favor, avísanos con respeto mediante un comentario si algo en este blog necesita créditos ♥
•°Vanessa Martinez © 2012-2019°•

✿ Y RECUERDA, TUS COMENTARIOS ALIMENTAN MI BLOG Y SON CARICIAS DE DIOS A MI ALMA ✿
Cuando comentas con amor y respeto ♥ Nos estamos leyendo mis linduras, mis corazones de fe♥

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.. Puedes compartir la URL de tu blog siempre y cuando opines sobre la entrada que estas comentando y que tu enlace no sea spam ni inadecuado. Dichos comentarios serán marcado como spam y eliminados. Si un niño de 10 años no puede leer o ver lo que compartes entonces 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