Cómo crear un sidebar flotante para compartir en redes sociales con CSS

Las redes sociales son una parte muy importante de tu negocio online para poder conseguir aún más clientes. Los botones para compartir en redes sociales son muy útiles para todo sitio web que se precie y ayudan al usuario a mantenerse informado en todo momento de todas nuestras novedades. Es por eso que un menú flotante con las típicos botones de las redes sociales aumenta los seguidores en redes sociales de tu web y te ayuda a dirigir el tráfico hacia tu sitio web. En este tutorial, vamos a crear un sidebar flotante con botones de redes sociales mediante CSS sin que tenga un impacto muy grande en el diseño de tu web.

Puedes encontrar muchos plugins de jQuery para crear este tipo de sidebars, pero muchos afectan negativamente a la velocidad y al diseño de tu web. Para abordar esto, te vamos a proporcionar un código CSS muy simple para añadir un sidebar flotante en el lado izquierdo/derecho de tu sitio web. Y todo, lo llevaremos a cabo sin tener que añadir más lenguajes de programación, solo única y exclusivamente CSS.

En este código de ejemplo, vamos a implementar un sidebar flotante con los típicos botones para compartir en redes sociales en el lado derecho de la página mediante CSS. En este sidebar, incluiremos enlaces a las redes sociales más populares del momento, es decir: Facebook, Twitter, Goolge+, LinkedIn, YouTube y Pinterest.

Código HTML

Coloca este código HTML en el elemento <body> de tu página web, y añade los enlaces de tus redes sociales a sus respectivos iconos.

<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/programacionnet" target="_blank">Like Us on<br>Facebook</a></p>
        </li>
        <li>
            <img src="images/twitter-circle.png" width="32" height="32">
            <p><a href="https://twitter.com/noprog" target="_blank">Follow Us on<br>Twitter</a></p>
        </li>
        <li>
            <img src="images/gplus-circle.png" width="32" height="32">
            <p><a href="https://plus.google.com/programacionnet" target="_blank">Follow Us on<br>Google+</a></p>
        </li>
        <li>
            <img src="images/linkedin-circle.png" width="32" height="32">
            <p><a href="https://www.linkedin.com/company/programacionnet" target="_blank">Follow Us on<br>LinkedIn</a></p>
        </li>
        <li>
            <img src="images/youtube-circle.png" width="32" height="32">
            <p><a href="http://www.youtube.com/programacionnet" target="_blank">Subscribe on<br>YouYube</a></p>
        </li>
        <li>
            <img src="images/pin-circle.png" width="32" height="32">
            <p><a href="https://www.pinterest.com/programacionnet" target="_blank">Follow Us on<br>Pinterest</a></p>
        </li>
    </ul>
</div>

Código CSS

El siguiente snippets de CSS es suficiente para implementar un sidebar flotante con los típicos botones para compartir en redes sociales en tu sitio web. Coloca este código dentro de la sección <head> de tu página web.

.sticky-container{
    padding:0px;
    margin:0px;
    position:fixed;
    right:-130px;
    top:230px;
    width:210px;
    z-index: 1100;
}
.sticky li{
    list-style-type:none;
    background-color:#fff;
    color:#efefef;
    height:43px;
    padding:0px;
    margin:0px 0px 1px 0px;
    -webkit-transition:all 0.25s ease-in-out;
    -moz-transition:all 0.25s ease-in-out;
    -o-transition:all 0.25s ease-in-out;
    transition:all 0.25s ease-in-out;
    cursor:pointer;
}
.sticky li:hover{
    margin-left:-115px;
}
.sticky li img{
    float:left;
    margin:5px 4px;
    margin-right:5px;
}
.sticky li p{
    padding-top:5px;
    margin:0px;
    line-height:16px;
    font-size:11px;
}
.sticky li p a{
    text-decoration:none;
    color:#2C3539;
}
.sticky li p a:hover{
    text-decoration:underline;
}

Fuente: codexworld.com

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.