[Tutoriales] Gadget redes sociales sencillo

Holiiii!!!! Hoy les traigo un tutorial bastante sencillo de como poner unos botones de redes sociales muy sencillo. El tutorial lo voy ha hacer yo, pero la idea la he cogido de la plantilla Fresh Blog, de Sora Templates que he usado para un blog de un trabajo de clase, así que los créditos van a Sora Templates.

Lo primero es ir a Plantilla, Editar HTML, y justo antes de ]]></b:skin>, copiamos el siguiente código:

.social__list {
  text-align: center;
}
.social__list a {
  margin: 0 8px 0 8px;
  color: rgba(86, 14, 134, 0.66);
  cursor: pointer;
}
.social_label {
  vertical-align: top;
  font-family: Open Sans;
  font-size: 11px;
  display: block;
}
.icon-2x {
  font-size: 3em;
}
.gdlr-sidebar * {
border-color: #eeeeee;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-facebook:before {
content: "\f09a";
}
.fa-twitter:before {
content: "\f099";
}
.fa-google-plus:before {
content: "\f0d5";
}
.fa-instagram:before {
content: "\f16d";
}

Y luego nos vamos a Diseño; Añadir Gadget HTML/JavaScript y copiamos el siguiente código:

<div class="social social__list unstyled">
    <a class="fa fa-facebook icon-2x social_link social_link__facebook" data-rel="tooltip" data-original-title="facebook" href="URL_DE_TU_FACEBOOK">
        <span class="social_label">Facebook</span>
    </a>
    <a class="fa fa-twitter icon-2x social_link social_link__twitter" data-rel="tooltip" data-original-title="twitter" href="URL_DE_TU_TWITTER">
        <span class="social_label">Twitter</span>
    </a>
    <a class="fa fa-google-plus icon-2x social_link social_link__gplus" data-rel="tooltip" data-original-title="gplus" href="URL_DE_TU_GOOGLE">
        <span class="social_label">Gplus</span>
    </a>
    <a class="fa fa-instagram icon-2x social_link social_link__instagram" data-rel="tooltip" data-original-title="instagram" href="URL_DE_TU_INSTAGRAM">
        <span class="social_label">Instagram</span>
    </a>
</div>

Para cambiar el color de los botones, tienes que cambiar, en el primer código, lo que está puesto en rojo, por algún color hexadecimal o rgb que puedes buscar AQUÍ. Cuando pases el ratón por encima del botón, el color se cambiará por el que tengas configurado en el blog para cuando pasas el ratón por encima de un link. Puedes cambiar esto desde Diseño, Opciones Avanzadas, o desde Editar HTML, buscando la línea a:hover { y cambiando el color que salga con los colores que encuentres en la página que te di en el link.

Espero que les haya gustado el tutorial! Y ya saben, créditos a Sora Templates.

Beshus y hasta mañana!!