Tutorial: Cómo agregar botones sociales con CSS a Blogger

remyhn · 25 Sep 2012

alguien me pregunto como se hacen estos botones:

Ver Botones en Funcionamiento

La respuesta es sencilla, espero q me entiendan xq no soy muy bueno pa explicar:

primero colocalos este CSS en nuestra plantilla:

Insertar CODE, HTML o PHP:

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

Luego añadimos un gadget en el lugar donde deseamos q aparescan los botones y dentro pegamos este codigo:

Insertar CODE, HTML o PHP:

<div id='contenido-social'>
<a class='fb-icon' href='url de la cuenta'/>
<a class='gp-icon' href='url de la cuenta'/>
<a class='t-icon' href='url de la cuenta'/>
<a class='rss-icon' href='url de la cuenta'/>
</a></a></a></a></div>

Esa es la forma en q yo lo hago, espero les sirva.

Carlos Arreola · 28 Sep 2012

Tema aprobado y agregado al listado de tutoriales.

dinoghost · 30 Sep 2012

Muy buen tutorial amigo!

Gonzalo Ferrari · 1 Oct 2012

Esta bueno,yo justo estaba buscando uno pero parecido que es así

sabes como lo puedo hacer?

Jhon04 · 1 Oct 2012

Buen aporte sin duda ayudara a los que recién empiezan..:encouragement:

José Sainpere · 1 Oct 2012

Buen aporte gracias por compartir

trabajosweb · 1 Oct 2012

Es bien fácil de hacer. Gracias por el aporte.

Facundo · 1 Oct 2012

Que buen efecto ! Lo hiciste vos el código o lo encontraste por ahí ? (Si lo encontraste por ahí, te recomiendo poner los créditos).

Igualmente, como es solo .css y un poquito de html, esos códigos sirven tanto para blogger, como para WP como para cualquier página web.

Saludos!

remyhn · 2 Oct 2012

Facundo dijo:
Que buen efecto ! Lo hiciste vos el código o lo encontraste por ahí ? (Si lo encontraste por ahí, te recomiendo poner los créditos).

Igualmente, como es solo .css y un poquito de html, esos códigos sirven tanto para blogger, como para WP como para cualquier página web.

Saludos!

Verdaderamente los vi en un pagina y saque el codigo, solo q no tengo ni la minima idea de cual era la pagina ya q fue ya dias atras.

8:, pero si recuerdo claro q pondrelos creditos!

ch3 · 2 Oct 2012

Amigo creo que el código debería ir así:

HTML:

<div id='contenido-social'>
<a class='fb-icon' href='#'/></a>
<a class='gp-icon' href='#'/></a>
<a class='t-icon' href='#'/></a>
<a class='rss-icon' href='#'/>
</a></div>

Saludos

aslek · 16 Oct 2012

gracias lo acabo de agregar ami blog

Henry Valdez · 16 Oct 2012

ch3 dijo:
Amigo creo que el código debería ir así:

HTML:

<div id='contenido-social'> <a class='fb-icon' href='#'/></a> <a class='gp-icon' href='#'/></a> <a class='t-icon' href='#'/></a> <a class='rss-icon' href='#'/> </a></div>

Saludos

Eso iba a decir. Las etiquetas se deben cerrar cuando termina cada etiqueta, no todas al final.
Buen tuto, recomendaría al que valla a utilizarlo que se descargue las imágenes y las resuba en caso de que valla a utilizar algún servidor propio.

gusdangon · 1 Nov 2012

Lo probé y funciona perfectamente. Gracias remyhn, eso sí, la corrección que hizo el amigo ch3 sobre las etiquetas es verdad.

Saludos!

Tutorial: Cómo agregar botones sociales con CSS a Blogger

trabajosweb