Blogger es una plataforma muy flexible y como muestra de ello, es la gran cantidad de trucos que se pueden hacer con CSS, como el truco de hoy en el que veremos como añadir botones sociales, qué gracias a un poco de CSS se hacen circulares pero cuando se pasa el cursor encima de ellos vuelven a su forma cuadrada original; sin duda alguna un efecto muy vistoso que llamará la atención de tus lectores. Así que, veamos como añadirlos a nuestros blogs…

Botones Sociales con CSS en Blogger

Para agregar este truco a tu blog solo debes ir a Diseño, Añadir Gadget, HTML/JavaScript y pegar allí el siguiente código:

<style type='text/css'>
/* BOTONONES SOCIALES */

.fb-icon, .gp-icon, .t-icon, .rss-icon {
-moz-transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
-o-transition: all 300ms ease-in-out 0s;
transition: all 300ms ease-in-out 0s;
border: 3px solid #FFFFFF;
border-radius: 40px;
float: left;
height: 40px;
margin: 0 7px 0 0;
opacity: 0.8;
width: 40px;
}

.fb-icon:hover, .gp-icon:hover, .t-icon:hover, .rss-icon:hover {
border-radius: 0;
opacity: 1;
}
.fb-icon{background:url("https://lh5.googleusercontent.com/-p6TmohGfdWw/UFTGXVqPqcI/AAAAAAAAC3A/-oEozS3JFk4/h120/f-logo.jpg") no-repeat scroll 0 0 transparent}
.gp-icon{background:url("https://lh5.googleusercontent.com/-SnuBBc0hTkc/UFTGXwXRZLI/AAAAAAAAC3I/b6puyRDIVqM/h120/g-logo.jpg") no-repeat scroll 0 0 transparent}
.t-icon{background:url("https://lh3.googleusercontent.com/-YiccwI4qX3c/UFTGYlUgsPI/AAAAAAAAC3Y/s-DOj47CEws/h120/t-logo.jpg") no-repeat scroll 0 0 transparent}
.rss-icon{background:url("https://lh4.googleusercontent.com/-LJF3GPv9d3g/UFTGYTLODQI/AAAAAAAAC3Q/U-Aa1tORhW0/h120/rss-logo.jpg") no-repeat scroll 0 0 transparent}
</style>

<div id='contenido-social'>
<a class='fb-icon' href='URL CUENTA FACEBOOK'/></a>
<a class='gp-icon' href='URL CUENTA G+'/></a>
<a class='t-icon' href='URL CUENTA TWITTER'/></a>
<a class='rss-icon' href='URL RSS FEED'/>
</a></div>

Ahora reemplaza lo resaltado en color azul, por lo que se indica en cada caso y guarda los cambios.

No olvides compartir esta entrada en tus redes sociales para que más personas conozcan el truco.