Cómo crear una barra lateral flotante de redes sociales pegajosas con CSS

Las redes sociales son una parte importante de su negocio en línea para llegar a más clientes. Los botones de redes sociales son muy útiles para cada sitio web y ayudan al usuario a obtener actualizaciones del sitio web. Además, la barra social pegajosa seguramente aumenta los seguidores de las redes sociales de su sitio web y ayuda a dirigir el tráfico a su sitio web. En este tutorial, vamos a crear una barra de botones de redes sociales pegajosas con CSS sin afectar el diseño del sitio web.
Puede encontrar muchos complementos de jQuery para la barra lateral flotante, pero puede afectar la velocidad y el diseño de su sitio. Para solucionar este problema, le proporcionaremos un código CSS simple para agregar una barra social pegajosa animada en el lado izquierdo / derecho de su sitio web. Puede agregar esta barra lateral flotante de las redes sociales con un desplazamiento suave sobre la animación mediante CSS.
En este código de ejemplo, implementaremos una barra de botones de compartir en el lado derecho con CSS puro. En esta barra social, se incluirán algunos de los enlaces de redes sociales más populares: Facebook, Twitter, Google+, LinkedIn, YouTube y Pinterest.

código HTML

Coloque el siguiente código HTML en el elemento cuerpo > de la página web y agregue los enlaces de su perfil social a los respectivos iconos sociales.
< div  class = "sticky-container" >
    < ul  class = "sticky" >
        < li >
            < img  src = "images / facebook-circle.png"  width = "32"  height = "32" >
            < P > < a  href = "https://www.facebook.com/codexworld"  target = "_blank" > igual que nosotros en < br > Facebook </ a > </ p >
        </ li >
        < li >
            < img  src = "images / twitter-circle.png"  width = "32"  height = "32" >
            < P > < a  href = "https://twitter.com/codexworldblog"  target = "_blank" > Siguenos en < br > Twitter </ a > </ p >
        </ li >
        < li >
            < img  src = "images / gplus-circle.png"  width = "32"  height = "32" >
            < P > < a  href = "https://plus.google.com/codexworld"  target = "_blank" > Siguenos en < br > Google + </ a > </ p >
        </ li >
        < li >
            < img  src = "images / linkedin-circle.png"  width = "32"  height = "32" >
            < P > < a  href = "https://www.linkedin.com/company/codexworld"  target = "_blank" > Siguenos en < br > LinkedIn </ a > </ p >
        </ li >
        < li >
            < img  src = "images / youtube-circle.png"  width = "32"  height = "32" >
            < P > < un  href = "http://www.youtube.com/codexworld"  target = "_blank" > Suscribirse en < br > YouYuBe </ una > </ p >
        </ li >
        < li >
            < img  src = "images / pin-circle.png"  width = "32"  height = "32" >
            < P > < a  href = "https://www.pinterest.com/codexworld"  target = "_blank" > Siguenos en < br > Pinterest </ a > </ p >
        </ li >
    </ ul >
</ div >

Código CSS

El siguiente CSS breve es suficiente para implementar una barra de iconos sociales pegajosos en su sitio web. Por favor, lea este CSS en la sección head > de la página web.
.sticky-container {
     relleno : 0 px ;
    margen : 0 px ;
    posición : fijo ;
    derecha : -130 px ;
    superior : 230 px ;
    ancho : 210 px ;
    índice z :  1100 ;
}
.sticky  li {
     list-style-type : none ;
    color de fondo : #fff ;
    color : #efefef ;
    altura : 43 px ;
    relleno : 0 px ;
    margen : 0 px  0 px  1 px  0 px ;
    -webkit-transición : todos los  0.25 s de facilidad de entrada;
    -moz-transición : todos los  0.25 s de facilidad de entrada;
    -o-transición : todos los  0,25 s de facilidad de entrada;
    transición : todos los  0.25 s de facilidad de entrada;
    cursor : puntero ;
}
.sticky  li : hover {
     margen izquierdo : -115 px ;
}
.sticky  li  img {
     float : left ;
    margen : 5 px  4 px ;
    margen derecho : 5 px ;
}
.sticky  li  p {
     padding-top : 5 px ;
    margen : 0 px ;
    altura de línea : 16 px ;
    tamaño de letra : 11 px ;
}
.sticky  li  p  a {
     text-decoration : none ;
    color : # 2C3539 ;
}
.sticky  li  p  a : hover {
     text-decoration : underline ;
}

Conclusión

Aquí hemos agregado solo algunos de los iconos sociales más populares a la barra social pegajosa, puede agregar otros iconos de redes sociales o enlaces útiles según sus requerimientos.

Acerca de: Programator

Somos Instinto Programador

0 comentarios:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Con tecnología de Blogger.