Cómo poner botones interactivos en tu blog

¿Te has fijado en los botones que uso en todos mis blogs de blogger? Como los que puedes ver en la barra lateral de este blog anunciando mis cursos y ebooks para bloggers y diseñadores. Son botones interactivos, yo elijo los colores y escribo el texto, el resto lo hace solito blogger gracias al código que tengo instalado en mi plantilla.

Y eso es lo que voy a compartir contigo hoy. ¡Verás que es muy sencillo! Y usando estos botones reduces el tiempo de carga de tu blog ¿sabes por qué? ¡Exacto! Tardan mucho menos en cargar que las imágenes y como puedes ponerles los colores que quieras, quedan perfectamente integrados en tu diseño.

¿Empezamos?

1.- Entra en tu Plantilla HTML. Pincha en cualquier zona dentro del cuadrado del código y abre el buscador interno de blogger pulsando a la vez: Control + F.


2.- Busca:

]]></b:skin>





3.- Justo encima pega el siguiente código:

/* Botones
--------------------------------- */

/* botones genéricos */

.button, .button:visited {
background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD4F8GjmDyJGME5JuaaOszVAB4CX8AimwG7HpCkz6C4yY4Ku1CK9ffQM2_tkPQmGMdJrDpxTWmskqOFCuLoa1mTveYWXNy1k0nn0eODKQFNdbxLfQz5w1tBQWY0-n2f5CRfXf96ELdfdXZ/w1-h50-no/overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #FFFFFF;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor:pointer
}

.button:hover { /* el efecto hover */
background-color: #111;
text-decoration: none;
color: #FFFFFF;
}

.button:active{  /* el efecto click */
top: 1px;
text-decoration: none;
}


/* tamaños */

/*  pequeños */
.small.button, .small.button:visited {
text-decoration: none;
font-size: 11px ;
}

/* medianos */
.button, .button:visited,.medium.button, .medium.button:visited {
font-size: 13px;
font-weight: bold;
line-height: 1;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
text-decoration: none;
}

/*  grandes */
.large.button, .large.button:visited {
font-size: 14px;
padding: 8px 14px 9px;
text-decoration: none;
}

/* extra grandes */
.super.button, .super.button:visited {
font-size: 34px;
padding: 8px 14px 9px;
text-decoration: none;
}

/* personalizados */

.pink.button {  color: #000000; background-color: #F78181; text-decoration: none; }
.pink.button:hover{  color: #000000; background-color: #F5A9A9; text-decoration: none; }

.blue.button, .blue.button:visited { color: #FFFFFF; background-color: #8FE1D8; text-decoration: none;}
.blue.button:hover{ color: #FFFFFF; background-color: #A0E9E1; text-decoration: none;}



4.- Ahora vamos a ver que podemos personalizar del código:

font-size: marcado en rosa en cada tamaño del botón. Es el tamaño de la letra.

background-color: el color de fondo del botón.

color: el color del texto del botón.



5.- La parte del código donde creamos los botones de diferentes colores es:


Botones azules:
.blue.button, .blue.button:visited { color: #FFFFFF; background-color: #8FE1D8; text-decoration: none;} /* color del botón normal */
.blue.button:hover{ color: #FFFFFF; background-color: #A0E9E1; text-decoration: none;} /* color del botón al hacer click con el ratón */



6.- Podemos añadir más colores, por ejemplo, verde:

.green.button, .green.button:visited {  color: #FFFFFF; background-color: #91BD09; text-decoration: none;}
.green.button:hover{  color: #FFFFFF; background-color: #749A02; text-decoration: none;}



7.- Solo tenemos que ir añadiendo el nombre del color de nuestro botón, en mi caso están en inglés (pink, blue, green...) y cambiando los códigos de los colores por los que queramos. Puedes usar esta web para sacar tus códigos:

Códigos colores HEX



8.- Una vez añadido y modificado el código a nuestro gusto, guardamos los cambios y listo.


Ahora, cada vez que queramos añadir un botón en una de nuestras entradas, pasaremos a Vista HTML y haremos lo siguiente:

<a class="large button blue" href="LA URL A LA QUE QUIERAS ENLAZAR" target="_blank">TEXTO DEL BOTÓN</a>

Donde:

large button blue es botón grande azul

Los diferentes tamaños disponibles son:

small button blue   /* pequeño */
medium button blue  /* mediano */
large button blue  /* grande */
super button blue  /* extragrande */

Cambia el color en cursiva por el nombre que hayas dado a tu botón (pink, green...), elige el tamaño que quieras entre los cuatro disponibles ¡y listo! Una vez publicada tu entrada verás tu botón listo para que tus visitas puedan usarlo.

¿Te animas a usar botones interactivos en tu blog y contarme qué te parecen?

---

Suscríbete a mis entradas por email ¡para no perderte nada!





♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥