Tutorial: Poner botones "leer más" en tu blog

¡Buenos dias a todos! El otro día publiqué una entrada con un Pack de botones leer más y algunos me comentasteis que no sabíais como ponerlos, asi que me he decidido a hacer un pequeño tutorial de como hacerlo. Es muy sencillito asi que no le tengáis miedo :P

Primero de todo elegir un boton de mi pack o cualquier boton que os guste o hayáis hecho y subirlo a algun host de imágenes como por ejemplo Imgur o incluso en el mismo blog. Una vez tengáis la url de la imágen dirigiros a vuestro panel de blogger ⇒ configuración ⇒ plantilla ⇒ editar HTML. Primero hacemos una copia de seguridad del template no se nos vaya a perder nada y a continuación buscáis el siguiente código:

<data:post.jumpText/>
Una vez localizado, tenéis que sustituir eso por <img src="URL de la imágen">, pegáis la url de la imágen, le dais a guardar y ya tendríais el botón colocado.
Hay algunas opciones más que siempre son útiles de saber como por ejemplo el tamaño del botón si lo queréis más grande o más pequeño, si os gustaría que quedara un poco más transparente o si lo queréis en el centro, derecha o izquierda. Os dejo aquí algunos tips que suelo usar.

⇒ Para modificar el tamaño de la imágen tendréis que pegar:
<img width="180" src="URL de la imágen">
Siendo 180 el tamaño del botón. Podéis cambiarlo al tamaño que queráis. Eso ya es a gusto del consumidor.  :)

⇒ Si queréis que esté centrado o a la izquierda/derecha deberéis pegar este código:
Centro: <center><img width="180" src="URL de la imágen"></center>
Derecha: <div align="right"><img width="180" src="URL de la imágen"></div>
Izquierda: <div align="left"><img width="180" src="URL de la imágen"></div>

⇒ Tres estilos diferentes que a veces también quedan monos.
Efecto bordes redondeados: <img style="border-radius:25px;" width="180" src="URL de la imágen">
Efecto de foto con transparencia: <img style="opacity: 0.5;" width="180" src="URL de la imágen">
Efecto con sombra en los bordes: <img style="box-shadow: 1px 1px 8px #9e9e9e;" width="180" src="URL de la imágen"></div>

Para ver el resultado de estos tres efectos pincha en leer más y lee la entrada completa!
Y estos son los tres efectos:


Bueno pues eso es todo por hoy. Espero que este mini tutorial os haya servido de ayuda y si tenéis cualquier duda, dejarmela en un comentario o contactar conmigo. ¡Que paséis un muy buen dia!
Sleek kisses! :)
Carola