Hola, después de bastante tiempo sin publicar nada, traigo algo bastante sencillo pero útil.
Se trata de una barra de redes sociales, esta misma, se queda fija en pantalla, al pasar el mouse por encima, se abre una lista de redes sociales las cuales vas a modificar.

Empezamos con los códigos, si querés ir directo al demo, podes hacer clic en el enlace (https://codepen.io/axelbenitez/pen/rbReyP) y copiar y pegar el código en tu proyecto.

Atención: Se esta utilizando FontAwesome para insertar los iconos de redes sociales, dichos iconos podes verlos en los siguientes enlaces:

Facebook: https://fontawesome.com/icons?d=gallery&q=facebook
Twitter: https://fontawesome.com/icons?d=gallery&q=twitter
YouTube: https://fontawesome.com/icons?d=gallery&q=youtube
Instagram: https://fontawesome.com/icons?d=gallery&q=instagram


1. Empezamos creando el contenedor principal de todo esto:


Para cambiar la posición, bastaría con usar las clases correspondientes en este elemento:

- .social-list--default
- .social-list--right



2. Ahora toca insertar un icono, así que vamos a insertar el icono "users"
 (https://fontawesome.com/icons/users?style=solid)



3. Ahora, vamos a crear una lista desordenada </ul> para crear la lista de redes sociales.

Pregunta: Debido a que, las redes sociales que se agregen, hay que hacerlo modificando el HTML, puedo hacer un mini código JS para que la lista se agrege automaticamente. Algo así como... ¿Un plugin?



El css es bastante grande, así que te invito a ir al pen en Codepen (https://codepen.io/axelbenitez/pen/rbReyP). De igual manera, se los dejo con comentarios (/**/).

Un saludo a todos, gracias a todos los que dejan puntos y comentan!

Hola, después de bastante tiempo sin publicar nada, traigo algo bastante sencillo pero útil.
Se trata de una barra de redes sociales, esta misma, se queda fija en pantalla, al pasar el mouse por encima, se abre una lista de redes sociales las cuales vas a modificar.

Empezamos con los códigos, si querés ir directo al demo, podes hacer clic en el enlace (https://codepen.io/axelbenitez/pen/rbReyP) y copiar y pegar el código en tu proyecto.

Atención: Se esta utilizando FontAwesome para insertar los iconos de redes sociales, dichos iconos podes verlos en los siguientes enlaces:

Facebook: https://fontawesome.com/icons?d=gallery&q=facebook
Twitter: https://fontawesome.com/icons?d=gallery&q=twitter
YouTube: https://fontawesome.com/icons?d=gallery&q=youtube
Instagram: https://fontawesome.com/icons?d=gallery&q=instagram


1. Empezamos creando el contenedor principal de todo esto:


Para cambiar la posición, bastaría con usar las clases correspondientes en este elemento:

- .social-list--default
- .social-list--right



2. Ahora toca insertar un icono, así que vamos a insertar el icono "users"
 (https://fontawesome.com/icons/users?style=solid)



3. Ahora, vamos a crear una lista desordenada </ul> para crear la lista de redes sociales.

Pregunta: Debido a que, las redes sociales que se agregen, hay que hacerlo modificando el HTML, puedo hacer un mini código JS para que la lista se agrege automaticamente. Algo así como... ¿Un plugin?



El css es bastante grande, así que te invito a ir al pen en Codepen (https://codepen.io/axelbenitez/pen/rbReyP). De igual manera, se los dejo con comentarios (/**/).

Un saludo a todos, gracias a todos los que dejan puntos y comentan!

[Gracias:]

Gracias:

gonzasdq, cesarvha, Xysad, mulife, HashiramaJ, MISTER1991, Ractor, FAKUS, ZabiinoOo

Para este post, 9 usuarios dieron las gracias!

Insertar opc socket a un ítem

Started by CristiaNN Soporte / Ayudas

Agregar o insertar imagen como noticia en mu core

Started by ALCONMU Soporte / Ayudas

WhatsApp Insertar Boton

Started by Azzlaer Extras

CAMBIAR BARRA COLOR DE BARRA DE HP EN LOS MOB

Started by ILUVATAR Soporte / Ayudas