Cómo poner botones en blogger ?

Cuando creamos un blog deseamos que este sea lo más profesional posible, pero los que trabajamos sobre la plataforma de blogger sabemos lo complicado que puede ser cumplir este deseo.

Uno de los tantos retos de trabajar en la plataforma de blogger es agregar botones que ejecuten alguna acción, como descargar, comprar o simplemente dirigir a otro blog.

Por esta razón quiero compartir la forma en como podrás colocar botones fácil de personalizar y de distintos colores, que harán que tu blog se vea bien agradable

Cómo poner botones para Blogger

Lo primero que debemos realizar es intalar los estilos, para que nuestros botones tengan una apariencia elegante.

Sigue los siguientes pasos: 

1- Dirígete a temas > edita html > luego CTRL + F y busca: ]]></b:skin> y encima de esa línea pegas el siguiente código:

/* ====================
	* 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

Es necesario instalar Font Awesome 5 para poder añadir íconos a los botones. Para instalarlo debes agregar la línea de abajo en el < HEAT> de tu plantilla. Esto lo encuentras al inicio del HTML de la plantilla.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>

 - Luego le damos a guardar los cambios.

Cómo gregar botones para Blogger en una entrada ó página de tu blog

Para insertar o agregar botones a tu entrada o página, debes activar la vista HTML y  agregar el código siguiente según tu gusto o necesidad.

Para Obtener un botón: 

Verde:

<a href="#" class="btn color-verde">
Boton verde
</a>

 Azul:

<a href="#" class="btn color-azul">
Boton azul
</a>

 

Rojo:

<a href="#" class="btn color-rojo">
Boton rojo
</a> 

 

 Amarillo:

<a href="#" class="btn color-amarillo">
Boton Amarillo
</a>

Negro:

<a href="#" class="btn color-oscuro">
Boton Negro
</a>

 Claro:

<a href="#" class="btn color-claro">
Boton Claro
</a>

 

Nota: No olvides que debes agregar el enlaces que desees: Ejemplo

<a href="Aqui el enlace"

Agregar icono a un botón de Blogger

Al principio de esta entrada explicamos como instalar Font Awesome 5 en su versión gratuita, al instalarlo ya podrás agregar  cualquier ícono dentro de los botones. 

Ejemplo: 

Ejemplo