Mil Trucos Blogger

Iconos sociales con efecto hover

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

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

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

3 Comentarios

  1. Diciembre 17, 2013    

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

    • Diciembre 17, 2013    

      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 :>)

    • Diciembre 18, 2013    

      Ya te ha respondido Jonathan LR 🙂

      Saludos

Deja un comentario

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

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo