Guía: Cómo Integrar una Barra Flotante Lateral en tu Proyecto Web

Por Diego F. Plata | 6 de octubre de 2024 | Código Html & Css

Paso 1: Añade el Código HTML

Copia y pega el siguiente fragmento HTML en la página donde quieras mostrar la barra flotante. Puedes agregarlo dentro del <body> de tu archivo index.html:

Table of Contents

<!-- Fragmento de código del menú de barra flotante -->
<div class="floating-bar">
    <a href="https://wa.me/1234567890" target="_blank" class="icon whatsapp">
        <i class="fab fa-whatsapp"></i>
    </a>
    <a href="https://www.facebook.com" target="_blank" class="icon facebook">
        <i class="fab fa-facebook-f"></i>
    </a>
    <a href="https://www.instagram.com" target="_blank" class="icon instagram">
        <i class="fab fa-instagram"></i>
    </a>
    <a href="tel:+1234567890" class="icon call">
        <i class="fas fa-phone-alt"></i>
    </a>
</div>

Paso 2: Incluye el Estilo CSS

Para darle diseño a la barra flotante, incluye el siguiente CSS en tu archivo styles.css o dentro de un bloque <style> en el <head> del archivo HTML:

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}
body {
    background-color: #333;
}
/* Barra flotante */
.floating-bar {
    font-size: 20px;
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
}
.icon {
    width: 45px;
    height: 45px;
    background-color: #333;
    color: black;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.3s;
}
.icon:hover {
    background-color: #555;
    transform: scale(1.3);
}
/* Estilos específicos para cada ícono */
.whatsapp {
    background-color: beige;
}
.facebook {
    background-color: beige;
}
.instagram {
    background-color: beige;
}
.call {
    background-color: orangered;
}

Paso 3: Añade el Enlace a los Iconos

Para que los íconos de WhatsApp, Facebook, Instagram y el teléfono se muestren correctamente, debes incluir la librería de Font Awesome en el <head> del archivo HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

Paso 4: Personalización

Actualiza los enlaces: Cambia https://wa.me/1234567890, https://www.facebook.com, https://www.instagram.com, y tel:+1234567890 con tus propios enlaces y número de teléfono.
Modifica los colores: Puedes cambiar background-color según los colores de tu marca para personalizar la apariencia de cada icono.

Paso 5: Guarda y Prueba

Guarda tus archivos y abre la página en tu navegador para confirmar que la barra flotante funciona correctamente.