Cómo poner botones interactivos en tu blog

diciembre 30, 2014

¿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://lh6.googleusercontent.com/-NNMcmNvfCb4/UsK8V-E3KvI/AAAAAAAAN30/ATPRHM_quRQ/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: #000000background-color: #F78181; text-decoration: none; }
.pink.button:hover{  color: #000000background-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: #91BD09text-decoration: none;}
.green.button:hover{  color: #FFFFFF; background-color: #749A02text-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 ♥






Te encantará:

7 pensamientos ¡falta el tuyo! ;)

  1. Que interesante! Espero poder ponerlo en practica tras las fiestas, que estos días tengo menos tiempo que antes!
    Un abrazo!

    ResponderEliminar
    Respuestas
    1. ¡Hola, Mónica!

      Pues ya me contarás qué tal han quedado :)

      ¡¡Besos y feliz año!! ^^

      Eliminar
  2. Hola Celia, fantástica entrada

    Una pregunta, para hacer el listado de TEMAS PRINCIPALES que tienes en tu blog ¿has utilizado este tipo de botones?
    Gracias por todo lo que nos enseñas
    Un abrazo
    Inés

    ResponderEliminar
    Respuestas
    1. ¡Hola guapa!

      ¿Te refieres a los azules? Sí, claro, los uso mucho en el blog :)

      Feliz finde!

      Eliminar
  3. ¡Hola! En caso de que quiera centrar el botón ya sea en algún gadget o la entrada, donde debo colocar el código center o algo así? Gracias, me fue muy útil :D

    ResponderEliminar
  4. De nuevo gracias por tu tutorial,lo estoy probando y me encanta!A ver si termino de diseñarlo.

    ResponderEliminar
  5. Hola Celia los he puesto y quedan genial... :) pero al añadir un cuarto color, el verde copiando el código igual que aquí me sale el botón negro y esta nota en plantilla "Invalid variable declaration in page skin: Variable is used but not defined. Input: label.color" ¿Sabes que puede pasar? Saludos y gracias

    ResponderEliminar



¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥



El Perro de Papel es una Marca propiedad de Celia Espada García debidamente registrada en la OEPM, Modalidad M, Número 3527002 (0). Todos los recursos creados por Celia Espada García están correctamente protegidos y vinculados a la autora y no pueden usarse sin consentimiento previo.

Safe Creative #1408270134965
Los derechos de autor y propiedad intelectual del material compartido, tanto gratuitamente como de pago, en esta web y sus redes sociales pertenecen a "El Perro de Papel", exceptuando las referencias a otros creadores, los cuales están debidamente citados en los créditos.