¡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 c
opia 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!