L
LabConker
Beta
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
BotBeta
Admin
Sigma
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario popular!
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Suscripción a IA
¡Gracias por compartir el tutorial! Colocar un botón de WhatsApp en HTML es útil para que los usuarios puedan contactarte rápidamente. Si necesitas ayuda con el código o tienes alguna pregunta específica, ¡no dudes en consultar!
C
castlemake
Beta
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Sería bueno si dejaras el código también. Gracias.
L
LabConker
Beta
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Excelente obs:
ahi dejo el index.html
el codigo tambien esta en el github:
github.com
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menú con Barra de Navegación</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background: linear-gradient(to right, #ff7e5f, #feb47b); /* Gradiente de fondo */
}
.navbar {
background-color: #000; /* Color negro para la barra */
overflow: hidden;
}
.navbar a {
float: left;
display: block;
color: #fff;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: #575757; /* Color al pasar el cursor */
}
/* Estilos para el botón de WhatsApp */
.whatsapp-button {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #17a523;
border-radius: 50px;
padding: 10px;
}
.whatsapp-button i {
font-size: 50px;
color: white;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<!-- Barra de Navegación -->
<div class="navbar">
<a href="#home">Inicio</a>
<a href="#services">Servicios</a>
<a href="#contact">Contacto</a>
<a href="#about">Sobre Nosotros</a>
</div>
<!-- Contenido de la página -->
<div style="padding: 20px;">
<h1>pagina web de ejemplo</h1>
<p>boton wasap</p>
</div>
<a href="https://api.whatsapp.com/send?phone...btener más información acerca del servicio de..."
class="whatsapp-button" target="_blank">
<i class="fab fa-whatsapp"></i>
</a>
</body>
</html>
ahi dejo el index.html
el codigo tambien esta en el github:
html-WhatsApp/index.html at main · CryptoCommander007/html-WhatsApp
html-WhatsApp. Contribute to CryptoCommander007/html-WhatsApp development by creating an account on GitHub.
github.com
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menú con Barra de Navegación</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background: linear-gradient(to right, #ff7e5f, #feb47b); /* Gradiente de fondo */
}
.navbar {
background-color: #000; /* Color negro para la barra */
overflow: hidden;
}
.navbar a {
float: left;
display: block;
color: #fff;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: #575757; /* Color al pasar el cursor */
}
/* Estilos para el botón de WhatsApp */
.whatsapp-button {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #17a523;
border-radius: 50px;
padding: 10px;
}
.whatsapp-button i {
font-size: 50px;
color: white;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<!-- Barra de Navegación -->
<div class="navbar">
<a href="#home">Inicio</a>
<a href="#services">Servicios</a>
<a href="#contact">Contacto</a>
<a href="#about">Sobre Nosotros</a>
</div>
<!-- Contenido de la página -->
<div style="padding: 20px;">
<h1>pagina web de ejemplo</h1>
<p>boton wasap</p>
</div>
<a href="https://api.whatsapp.com/send?phone...btener más información acerca del servicio de..."
class="whatsapp-button" target="_blank">
<i class="fab fa-whatsapp"></i>
</a>
</body>
</html>
Temas similares
-
andresr
- SEO y Posicionamiento Web
