Tutorial: Botones sociales con CSS para Blogger

remyhn

Gamma
Verificación en dos pasos desactivada
¡Usuario con pocos negocios!
Desde
15 Sep 2011
Mensajes
150
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

Admin
Verificado con videollamada
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Excelente comerciante!
Desde
6 Abr 2009
Mensajes
4.341
Tema aprobado y agregado al listado de tutoriales.
 

Gonzalo Ferrari

Beta
Verificación en dos pasos desactivada
Desde
8 Sep 2012
Mensajes
52
Esta bueno,yo justo estaba buscando uno pero parecido que es así

mr gusya.jpg

sabes como lo puedo hacer?
 

Jhon04

Gamma
SEO
Verificación en dos pasos desactivada
Desde
17 Ago 2012
Mensajes
171
Buen aporte sin duda ayudara a los que recién empiezan..:encouragement:
 

Facundo

Xi
Verificación en dos pasos desactivada
Desde
15 Abr 2009
Mensajes
4.454
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

Gamma
Verificación en dos pasos desactivada
¡Usuario con pocos negocios!
Desde
15 Sep 2011
Mensajes
150
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. :p8:, pero si recuerdo claro q pondrelos creditos!
 

ch3

Gamma
Programador
Verificación en dos pasos desactivada
Desde
15 Mar 2011
Mensajes
427
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

Beta
Verificación en dos pasos desactivada
Desde
31 Dic 2011
Mensajes
39
gracias lo acabo de agregar ami blog
 

Henry Valdez

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
24 Mar 2012
Mensajes
365
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

Gamma
SEO
Verificación en dos pasos desactivada
Desde
14 Ago 2012
Mensajes
202
Lo probé y funciona perfectamente. Gracias remyhn, eso sí, la corrección que hizo el amigo ch3 sobre las etiquetas es verdad.

Saludos!
 

Arriba