Efecto Hover - Imágenes borrosas en tus posts


Bendeciré a Jehová que me aconseja;
aun en las noches me enseña mi conciencia.
A Jehová he puesto siempre delante de mi;
porque está a mi diestra, no seré conmovido.
Salmo 16:7-8

Hola.. hola mis chulas chocolatosas, ¿como estan?, espero en Dios que bien!!
Yo de nuevo por acá para traerles como siempre algo bien chulo para que pongan chulis su blogge. Pero primeramente Feliz Navidad, espero lo hayan pasado super bien junto a sus seres queridos. Y bien, hoy quiero compartirles un tutorial que en lo personal me encanta mucho como se visualiza su efecto en las imágenes de las entradas del blog.

Se trata de un efecto hover para las imágenes de los posts.
No daré más detalles.. Mejor sigue conmigo y te enseño como hacerlo..
Es hiper mega simple de hacer y te encantará como se verán las imágenes en tus posts. Aquí una PRUEBA

Vamos conmigo y te enseño corazón.. Let's go..

  1. Primeramente este tuto es para blogs de blogger, segundo, sí porque sí haz una copia del código de tu plantilla, por cualquier error que cometas, poder tener el código a salvo. Para mi la mejor forma de hacerlo es seleccionar todo el código de tu plantilla y copiarlo, luego lo pegamos en un blog de notas. Lo dejamos reservado a un lado a la mano por cualquier cosa. Esto es bien simple, pero si eres nulo con los códigos en blogger, por eso te sugerimos seguir este paso, asi no pierdes nada en tu plantilla.
  2. Nos dirigimos a nuestra Plantilla
  3. Editar html
  4. Hacemos clic dentro del código html
  5. Y luego presionamos CTRL + F
  6. Se mostrará un mini buscador en la parte superior derecha dentro del recuadro del código html
  7. Allí pegamos lo siguiente: ]]></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)
  8. Luego presionamos Enter en el teclado para buscarlo
  9. Una vez encuentres esto ]]></b:skin en tu plantilla, pegamos justo encima 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(2px);
color: #FF1493;
}

Tutos Koko Kawaii


Con esto habrás agregado el efecto hover para las imágenes de tus posts. Recuerda que no es recomendable modificar este código a no ser que seas un experto en codificación y sepas bien cómo hacerlo. Lo único editable que puedes modificar el lo que en el mismo está resaltado en negrita y amarillo.

Si el código agregado antes de ]]></b:skin no te funciona como me pasó a mi (no se porque, pero bueno..), intenta ponerlo donde inicia esta sección de códigos, es decir, donde inicia la zona de los estilos css de tu código html. Mayormente esto es después del código mobile que trae tu plantilla. Lo ponemos justamente después de donde termina tu código mobile. Aquí un ejemplo:

Click aqui para ver la imagen en tamaño real

Espero mis chulas este efecto les guste tanto como a mi, de ser así no te olvides comentar. Igualmente están pendientes a las demás variantes de este que prontamente estaremos compartiendo contigo!! Y recuerden que de ahora en adelante les dejare en el Nimbus del blog todo lo que haya que copiar, ya que no podrán copiar directamente en el blog, así que, todo lo que haya que copiar lo dejaremos en una nota nimbus. En los tutos antiguos, dejarme un comentario para saber que debo actualizar el mismo y puedan copiar lo necesario a dicho tutorial.
Saludos y que Dios les bendiga mucho, mucho!!


Koko Kawaii
Conoce aquí a Koko Kawaii




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

1 comentario:

  1. [img]https://4.bp.blogspot.com/-xue2d895aFo/XE-POaWPO7I/AAAAAAAASQI/lInkxu-NbHEgIZqPeunzDyHqp5aErDCagCLcBGAs/s1600/boton-meayuda02.png[/img]

    ResponderEliminar


๑ 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♥

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