Añadiendo Botones Sociales Flotantes a mi Web

Menú de Navegación

Las redes sociales son una parte muy importante de los negocios online para poder obtener clientes. Los botones utilizados en las redes sociales son muy útiles para cualquier sitio web que se disponga a compartir información y así ayudar al usuario a mantenerse informado sobre todas nuestras noticias en todo momento. Por eso un menú flotante con los botones de redes sociales más usados aumentará la base de fans de su sitio y le ayudará a dirigir el tráfico a su página web.

En este tutorial, crearemos una barra lateral flotante en la parte izquierda con botones de redes sociales usando CSS, sin tener mucho impacto o repercusión en el diseño de su sitio web.

Puedes encontrar muchos plugins de jQuery para crear este tipo de barra lateral, pero muchos de ellos tienen un impacto negativo en la velocidad y el diseño de tu sitio web. Para contrarrestar esto, le proporcionamos un código CSS muy simple que le permite añadir una barra lateral flotante en el lado izquierdo o el derecho de su sitio web. Y haremos todo esto sin añadir ningún otro lenguaje de programación, sólo y exclusivamente CSS.

En este código de muestra, implementaremos una barra lateral flotante con los típicos botones para compartir socialmente en la parte derecha de la página usando CSS. En esta barra lateral incluiremos enlaces a las redes sociales más populares del momento, es decir: Facebook, Twitter, LinkedIn, YouTube y Pinterest.

Código HTML

Escriba este código HTML en el elemento <body> de su página web y añada los enlaces de su red social a los iconos correspondientes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
    <title>Botones Sociales</title>
    <link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div class="contenedorizq">
    <ul class="pegado">
        <li>
            <img src="imagenes/facebook-circle.png" width="32" height="32">
            <p><a href="https://www.facebook.com/" target="_blank" rel="noopener noreferrer">Like en<br>Facebook</a></p>
        </li>
        <li>
            <img src="imagenes/twitter-circle.png" width="32" height="32">
            <p><a href="https://twitter.com/" target="_blank" rel="noopener noreferrer">Síguenos en<br>Twitter</a></p>
        </li>
        <li>
            <img src="imagenes/linkedin-circle.png" width="32" height="32">
            <p><a href="https://www.linkedin.com/" target="_blank" rel="noopener noreferrer">Síguenos en<br>LinkedIn</a></p>
        </li>
        <li>
            <img src="imagenes/youtube-circle.png" width="32" height="32">
            <p><a href="http://www.youtube.com/" target="_blank" rel="noopener noreferrer">Suscríbete en <br>YouYube</a></p>
        </li>
        <li>
            <img src="imagenes/pin-circle.png" width="32" height="32">
            <p><a href="https://www.pinterest.com/" target="_blank" rel="noopener noreferrer">Síguenos en<br>Pinterest</a></p>
        </li>
    </ul>
</div>
</body>
</html>

.

Código CSS

Los siguientes fragmentos de CSS son suficientes para implementar una barra lateral flotante con los típicos botones para compartir redes sociales en su sitio web. Coloca este código dentro de la sección “encabezado” de tu sitio web.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.contenedorizq{
    padding:0px;
    margin:0px;
    position:fixed;
    right:-130px;
    top:230px;
    width:210px;
    z-index: 1100;
}
.pegado li{
    list-style-type:none;
    background-color:#fff;
    color:#efefef;
    height:43px;
    padding:0px;
    margin:0px 0px 1px 0px;
   
    transition:all 0.25s ease-in-out;
    cursor:pointer;
}
.pegado li:hover{
    margin-left:-115px;
}
.pegado li img{
    float:left;
    margin:5px 4px;
    margin-right:5px;
}
.pegado li p{
    padding-top:5px;
    margin:0px;
    line-height:16px;
    font-size:11px;
}
.pegado li p a{
    text-decoration:none;
    color:#2C3539;
}
.pegado li p a:hover{
    text-decoration:underline;
}

 

Nota

Recuerden de importar el archivo .css que para el ejemplo se llama estilo.css y también crear una carpeta llamada imágenes que debe contener los iconos sociales con el nombre que se hace referencia en cada etiqueta img