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.


3 comentarios

Fran Navarro · diciembre 17, 2013 a las 5:38 pm

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

    Jonathan LR · diciembre 17, 2013 a las 8:33 pm

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

    Hayder Juvinao · diciembre 18, 2013 a las 1:20 pm

    Ya te ha respondido Jonathan LR 🙂

    Saludos

Deja una respuesta

Marcador de posición del avatar

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