Iconos sociales con efecto hover

Los iconos sociales cada día cobran mas importancia y es por ello que se ha hecho casi indispensable que todo sitio web tenga un pack de iconos sociales con sus diferentes redes sociales. Es por ello que hoy en Mil Trucos Blogger te presentamos un pack de iconos sociales con efecto hover, al pasar el cursor sobre ellos dejan su forma redonda y se vuelven cuadrados. Los iconos sociales son los siguientes:

Para agregar estos botones en tu blog pega el siguiente código CSS antes de ]]></b:skin>  :

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

Ahora ve a Diseño, Añadir gadget, HTML/JavaScript y pega lo siguiente:

<div id='contenido-social'>
<a class='fb-icon' href='URL de tu cuenta de Facebook'/>
<a class='gp-icon' href='URL de tu cuenta de Google Plus'/>
<a class='t-icon' href='URL de tu cuenta de Twitter'/>
<a class='rss-icon' href='URL de tu RSS'/>
</a></a></a></a></div>

Para finalizar reemplaza lo que esta resaltado en color azul por lo que se indica en cada caso y guarda los cambios.

Esperamos que te haya gustado este espectacular truco para tu blog y que nos sigas visitando.

0
Shares

3 thoughts on “Iconos sociales con efecto hover

  • diciembre 17, 2013 en 5:38 pm
    Permalink

    La segunda parte de añadir código HTML/JavaScript al gadget lo he entendido, pero la primera no.

    Responder
    • diciembre 17, 2013 en 8:33 pm
      Permalink

      Solo entra a Plantilla, Editar HTML, haz click adentro, presiona CTRL+F y buscas “]]></b:skin>” (sin las comillas) y antes pegas el primer código.

      Es facil :>)

      Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *