Cuando se tiene un blog siempre necesitamos llamar la atención de nuestros lectores y una de las formas es agregando botones que hagan alguna acción, ya sea: descargar, suscripción, comprar, etc. Es por eso que quiero compartir contigo 6 botones para blogger que puedes instalar y personalizar.
¡Hola! soy Gabriela de peengler.com. Anteriormente había publicado sobre: Botón de descargar con efecto al pasar el cursor. Y ahora, puedes usar cualquiera de los siguientes 6 botones para lo que tú quieras.
Sin más que decir, ¡empecemos!
Clic en la imagen para ver el vídeo ↑ en YouTube
Cómo poner botones para Blogger paso a paso
Primero que nada debes instalar los estilos para que se vean bonitos los botones para Blogger. Y para eso debes dirigirte a Tema > Editar Html > Luego CTRL + F y busca: ]]></b:skin> y arriba de esa línea pegas lo siguiente:
/* ====================
* BOTONES / BOTON *
==================== */
.btn{
border: none;
cursor: pointer;
color: #fff;
display: inline-block;
padding: 16px 22px; /*margen interno*/
border-radius: 6px; /*borde redondeado*/
text-align: center;
line-height: 22px;
font-family: "Roboto", sans-serif;
font-size: 18px; /*tamaño de las letras*/
overflow: hidden;
margin-left: 15px;
box-shadow: 0px 6px 18px -5px rgba(0, 0, 0, 0.5);
background-size: 300% 100%;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.btn:visited, .btn:hover{
color: #fff;
}
.btn:hover {
background-position: 100% 0;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.btn i{
color: #fff;
font-size: 16px
}
/*Verde*/
.btn.color-verde {
background-image: linear-gradient(to right, #137f4c, #2bb673, #2bb673, #137f4c);
}
/*Azul*/
.btn.color-azul {
background-image: linear-gradient(to right, #0377a8, #4481eb, #4481eb, #0377a8);
}
/*Rojo*/
.btn.color-rojo {
background-image: linear-gradient(to right, #eb3941, #f15e64, #f15e64, #eb3941);
}
/*Amarillo*/
.btn.color-amarillo {
background-image: linear-gradient(to right, #e48803, #e4ae2d, #e4ae2d, #e48803);
}
/*Oscuro*/
.btn.color-oscuro {
background-image: linear-gradient(to right, #29323c, #485563, #485563, #29323c);
}
/*Claro*/
.btn.color-claro {
background-image: linear-gradient(to right, #ccc, #e8e8e8, #e8e8e8, #ccc);
color: #000
}
.btn.color-claro i {color: #000}
.centrar{text-align: center;}
a{text-decoration: none;}
Instalar Font Awesome 5 en Blogger
Para que puedas añadir iconos a tus botones, instalaremos Font Awesome la versión 5 agregando la siguiente línea debajo de <head> (Lo encuentras al comienzo del código de tu plantilla)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
Ahora guardas los cambios.
Agrega botones para Blogger en una entrada/página de tu blog
Para mostrar los botones en tu entrada o página, solo debes crear un enlace y agregarle la clase dependiendo del botón. Ejemplo:
Botón verde
<a href="#" class="btn color-verde">
Boton verde
</a>
Botón Azul
<a href="#" class="btn color-azul">
Boton azul
</a>
Botón Rojo
<a href="#" class="btn color-rojo">
Boton rojo
</a>
Botón Amarillo
<a href="#" class="btn color-amarillo">
Boton amarillo
</a>
Botón Oscuro
<a href="#" class="btn color-oscuro">
Boton oscuro
</a>
Botón Claro
<a href="#" class="btn color-claro">
Boton claro
</a>
Nota: Recuerda agregar tu enlace dentro del href=»aqui-tu-enlace». Ver tutorial
Centrar Botón en una entrada de Blogger
Para centrar tu botón, solo debes agregar un bloque y le agregas la clase centrar y dentro del bloque colocas tu botón. Ejemplo:
<div class="centrar">
<!-- aqui el boton -->
</div>
Cualquier duda mira el vídeo tutorial: ver tutorial
Agregar icono a un botón de Blogger
Anteriormente hemos instalado Font Awesome 5 “versión gratuita” por lo que puedes agregar cualquier icono dentro del botón. Ir a Font Awesome.
Por ejemplo:
<a href="#" class="btn color-verde">
Boton verde
<i class="fas fa-download"></i>
</a>
Cualquier duda mira el vídeo tutorial: ver tutorial
Sígueme en Youtube🔥
Aprende a crear páginas web con HTML, CSS y Javascript.
☑ Puede que también te interese:
Gabriela Laya
Me gusta todo lo relacionadaoa la creación de sitios web ya sea, usando código "HTML, CSS y JS" o usando un constructor "Elementor"