Invert Social, iconos sociales con colores invertidos al pasar el cursor

"Invert Social" es el nombre del efecto que le dí a unos iconos sociales. Los colores de cada red social son normales hasta que pasamos el cursor por encima, que es cuando toma el efecto de colores invertidos y se transforma de cuadrado a circulo.

Un efecto bastante simple, pero no por eso deja de verse hermoso. Puedes ver la demostración desde aquí mismo:

¿Te gusta? ¿Qué tal si lo añadimos a tu blog?.

Para hacerlo, nos dirigimos a Plantilla→Editar HTML, presionamos CTRL+F y buscamos <head> y justo debajo de este, pegamos lo siguiente:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

El anterior código, es el que contiene no solo los iconos sociales, también una infinidad de iconos de todo tipo, desde Font Awesome, busca y agrega los iconos que deseas.

Ahora, añadiremos todo de uno solo, es decir, el CSS y el HTML de los iconos en un solo código. Para ello nos vamos a Diseño→Añadir Gadget→HTML/Javascript y pegamos:

<ul class="invertsoc">
<li>
<a href="URLFacebook"></a></li>
<li>
<a href="URLTwitter"></a></li>
<li>
<a href="URLGoogle"></a></li>
<li>
<a href="URLYoutube"></a></li>
<li>
<a href="URLLinkedIn"></a></li>
</ul>
<style type='text/css'>
.inversoc{
display:inline-block;
z-index:10000;
}
.invertsoc li{
display:inline-block;
margin:2px;
}
.fa-facebook, .fa-twitter, .fa-google-plus, .fa-youtube, .fa-linkedin{
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition:0.5s;
font-size: 20px;
color: #fff;
padding: 8px;
text-align:center;
width:20px;
height:20px;
}
.fa-facebook{
background:#3A589B;
border:2px solid #3A589B;
}
.fa-facebook:hover{
background:#fff;
color:#3A589B;
border-radius:50%;
}
.fa-twitter{
background:#598DCA;
border:2px solid #598DCA;
}
.fa-twitter:hover{
background:#fff;
color:#598DCA;
border-radius:50%;
}
.fa-google-plus{
background:#E02F2F;
border:2px solid #E02F2F;
}
.fa-google-plus:hover{
background:#fff;
color:#E02F2F;
border-radius:50%;
}
.fa-youtube{
background:#CF3427;
border:2px solid #CF3427;
}
.fa-youtube:hover{
background:#fff;
color:#CF3427;
border-radius:50%;
}
.fa-linkedin{
background:#007BB5;
border:2px solid #007BB5;
}
.fa-linkedin:hover{
background:#fff;
color:#007BB5;
border-radius:50%;
}
</style>

Tan solo reemplazar lo que está resaltado por lo que indica para guardar los cambios y terminar.

Espero que este post haya sido de tu agrado, hasta el siguiente tutorial ;)