Ya hemos aprendido a modificar el tamaño de nuestras fotos y añadirles un marco a juego con los colores de nuestro blog. Hoy, vamos a ir un poco más allá: añadir efectos a nuestras fotos.
Las fotografías, como ya hemos comentado varias veces, son uno de los reclamos más eficaces de nuestro blog, por ello, debemos cuidarlas y prestarles atención, optimizar su tamaño, colocación y revisar cada detalle.
Por eso, hoy quiero compartir con vosotros un efecto muy chulo que encontré en una de mis excursiones por internet y estaba deseando probar.
Imagen con cuadro de texto deslizante
El código que vamos a usar es:
Necesitamos tener la imagen alojada en un servidor externo, tipo dropbox, puedes descargarlo y aprender a manejarlo con este tutorial.
Este código tenemos que pegarlo, en Vista HTML, en la zona de nuestra entrada donde queramos que aparezca la imagen.
URL DE LA IMAGEN: la ruta de nuestra imagen.
LEER MAS: el texto que aparecerá en el cuadrado inferior izquierda.
TITULO: el título que queramos darle a nuestra fotografía.
TEXTO: la explicación de lo que queremos transmitir.
Mi código personalizado sería éste:
Y el resultado sería el de la imagen inferior. Pero aún queda lo más importante.
Aplicar un estilo con CSS a nuestra imagen para que el efecto deslizante se lleve a cabo al pasar el cursor.
Añadir estilo con CSS a la fotografía
El código que vamos a usar es éste:
Las partes que están en rojo, son las que podéis modificar para adaptarlas al diseño de vuestro blog.
*En tutoriales anteriores sobre programación ya hemos visto como modificar los colores y los tamaños, como en éste sobre como instalar un menú con pestañas personalizado.
* Si te los has perdido, échales un ojo para que te sea más sencillo personalizar tu código.
Lo ideal es que tengáis un blog de pruebas, ya que el efecto del cuadro deslizante no se ve en Vista Previa, tenéis que publicar la entrada e ir probando.
Para personalizar el diseño del cuadro deslizante, tenemos que pegar el último código justo al inicio de nuestra entrada, sin que haya nada delante, en Vista HTML.
En nuestro blog de pruebas, publicamos la entrada.
Y vamos personalizando el código hasta que quede a nuestro gusto.
Si has seguido el tutorial paso a paso, habrás notado que he puesto los códigos desordenados, pero me parecía más sencillo empezar por el código de la imagen, que puede ponerse en la posición que quieras de la entrada y terminar con el estilo a aplicar, que es más complicado y va justo al inicio de la entrada.
Puede que este tutorial sea un poco más complicado que los anteriores, pero ¡es que ya hemos visto las nociones básicas! Ha llegado la hora de darle caña al tema de la programación ¿no os parece?
|
|
|
|
|
¿Te ha resultado interesante esta entrada?
¡¡Compártela en tus redes sociales!!
Puede que a alguno de tus contactos también le resulte útil
Gracias ♥
No hay comentarios:
Publicar un comentario en la entrada
¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥