Ahora veremos de qué forma podemos lograr que la imagen del enlace 'seguir leyendo' puede quedar justo por el borde de nuestra entrada, dando la sensación de salir dese por detrás; vamos, como lo pueden ver aqui.
Para aprender como hacerlo, sigue leyendo esta entrada!
Es altamente recomendable que primero sigas este tutorial ya que si tu entrada no tiene fondo, el efecto se perderá un poco.
Y también es importante la forma a la hora de diseñar la imagen que usaremos. Si no estás muy seguro de cómo hacerlo, dejaré un PSD en la próxima entrada :)
1. Vas a la pestaña 'Plantilla' de tu blog y entras en 'Editar HTML'.
2. Le das a 'Plantilla de formato', luego aprietas CTRL+F y finalmente buscas /* Posts
3. Por debajo de ello te saldrá una línea punteada, debajo de esa línea pegas esto:
.jump-link img{
background: transparent;
margin-left: -27px;
}
*Modifica el margin-left por margin-right si tu quieres alinearlo hacia la derecha*
4. After that, vas a buscar <div class='jump-link'> y un poquito más abajo te sale algo como esto <data:post.jumpText/> y lo vas a borrar. Allí en su lugar vas a pegar esto otro:
<img src='Link de tu imagen'/>
*Nota* Por defecto así como esta saldrá alineado a la izquierda (como se ve en el blog de pruebas). Si tu quiere alinearlo a la derecha, debes pegar esto en vez de lo anterior:
<div style="text-align: right;"><img src='Link de la imagen'/></div>
5. Ya que lo has hecho, pincha en 'Vista previa de la plantilla' y fijate como ha quedado.
Si queda corrido, y no queda perfecto así en su lugar como lo ves en el blog de pruebas, debes volver a .jump-link img{ (lo que habíamos pegado primero) y modificar el margin-left (o margin-right xD) un poco... eso ya es cuestión de ir probando con paciencia hasta que quede perfecto en el lugar adecuado. Y ya está!
Bueno chicas, espero que les haya gustado. Ya saben que cualquier duda que tengan me pueden dejar un comentario y las ayudaré encantada. Un besito gigante!
Dios Cataa, muchas gracias por el tutorial, hace tiempo que lo estaba buscando :D
ResponderEliminarGraciias, Lo deseaba hace tiempo *-* Soy nueva lectora del blog, ya extrañaba que publicaras...♥
ResponderEliminarHola Danii, me alegra que te sirva :) Gracias por leerme! Espero que te quedes por aquí, je, y cualquier duda ya sabes, puedes preguntarme. Un besito!!
EliminarMuchísimas gracias Cata! ^-^
ResponderEliminarLo estaba buscando hace tiempoo! n.n
Besootes (:
Hola, mira, que no entiendo lo último, osea, lo de modificar el margin, ¿como lo modificamos?
ResponderEliminarTienes que cambiar el número por el que te queda cómodo, lo explique ahi arribita. Es a ojo, tienes que fijarte y cambiarlo para que quede en su lugar :)
Eliminar¡Hola, Cata!
ResponderEliminarMuchísimas gracias por el tutorial, quedó genial en mi blog.
Me alegro de que por fin hayas vuelto, se te echaba de menos.
¡Un besote enorme! <3
Oh, si! Te quedo genial, me encanta que lo hayas puesto en practica jajajaj. Me pone contenta saber que por aquí me echan de menos :D Un besito!
Eliminar