"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:
Un efecto bastante simple, pero no por eso deja de verse hermoso. Puedes ver la demostración desde aquí mismo:
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:
Espero que este post haya sido de tu agrado, hasta el siguiente tutorial ;)
<ul class="invertsoc">Tan solo reemplazar lo que está resaltado por lo que indica para guardar los cambios y terminar.
<li>
<a href="URLFacebook"><span class="fa fa-facebook"></span></a></li>
<li>
<a href="URLTwitter"><span class="fa fa-twitter"></span></a></li>
<li>
<a href="URLGoogle"><span class="fa fa-google-plus"></span></a></li>
<li>
<a href="URLYoutube"><span class="fa fa-youtube"></span></a></li>
<li>
<a href="URLLinkedIn"><span class="fa fa-linkedin"></span></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>
Espero que este post haya sido de tu agrado, hasta el siguiente tutorial ;)
0 comentarios:
Publicar un comentario