En este artículo aprenderás cómo agregar un botón flotante en Blogger utilizando la biblioteca de íconos vectoriales Font Awesome. Esta herramienta te permite insertar íconos fácilmente en tu sitio web mediante código HTML y CSS, sin necesidad de usar imágenes. Además, podrás personalizar el tamaño, el color y el estilo de los íconos de forma sencilla.
Si tienes un blog en Blogger (Blogspot) y deseas conectar directamente con tus visitantes vía WhatsApp, agregar un botón flotante de WhatsApp es una forma eficaz de mejorar el contacto y aumentar las conversiones. En este tutorial te explico paso a paso cómo instalarlo para que aparezca al principio o al final de tu página, sin afectar el diseño de tu plantilla.
.
¿Sabías que:
● Utilizar una biblioteca de íconos vectoriales son mucho más livianos que las imágenes tradicionales.
● Font Awesome ofrece miles de iconos vectoriales.
● Una de las ventajas de utilizar Font Awesome, es que es responsive (se adapta a móviles y tablets).
¿Por qué agregar un botón flotante de WhatsApp en tu blog?
Implementar un botón de WhatsApp permite que los visitantes:
1. Te escriban directamente con un solo clic.
2. No tengan que rellenar formularios.
3. Confíen más en tu servicio al ver que estás disponible.
Además, es ideal para emprendedores, negocios locales, tiendas online y freelancers que quieren ofrecer atención rápida desde su blog
Paso 1: Antes de empezar a colocar el Código HTML para el botón flotante de WhatsApp
Realiza una copia de seguridad de la plantilla de Blogger.
Entra a tu cuenta de Blogger.
Ve a Tema > clic en el ícono resaltado > Crear copia de seguridad
Luego ingresa a
> Editar HTML.
Paso 2: Revisa el código antes de empezar
Accede a la sección <head> de tu plantilla en Blogger y verifica si ya se está utilizando Font Awesome como biblioteca de íconos. Si no lo encuentras en las primeras líneas del código, utiliza la barra de búsqueda para localizar el siguiente fragmento:
Es importante que realices esta revisión, ya que si el código está duplicado, podría generar errores en el funcionamiento del sitio.
Paso 3: Pega este código si tu plantilla no utiliza Font Awesome.
Pega el siguiente código en <Head>.
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
Paso 4: Pega este código antes del cierre de </style>
A continuación, pega el siguiente código
<style>
.float-wa {
position: fixed;
width: 60px;
height: 60px;
bottom: 40px; /* posición del boton */
right: 40px;
background-color: #25d366; /* color official de WhatsApp */
color: #fff;
border-radius: 50px;
text-align: center;
font-size: 30px;
z-index: 100;
cursor: pointer;
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
}
.float-wa.visible {
opacity: 1;
pointer-events: auto;
}
</style>
Puedes cambiar el color y el tamaño del ícono modificando el valor del código de color #25d366. Para personalizarlo, consulta la paleta disponible en HTMLColorCodes.com
Paso 5: Pega este código antes del cierre de </body>
Ubica la sección <body> de tu plantilla y busca el último bloque <script>. Luego, pega el siguiente código justo antes del cierre final </script>.
Opción uno que el Botón Flotante de WhatsApp aparezca en la mitad de la página:
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function($) {
// Agrega el botón si no existe
if ($('#whatsapp-button').length === 0) {
$("body").append(
"<a href='https://api.whatsapp.com/send?phone=513113665766&text=Hola%2C%20necesito%20información' id='whatsapp-button' class='float-wa' target='_blank' title='Escríbenos por WhatsApp'>💬</a>"
);
}
// Mostrar cuando el usuario ha llegado a la mitad
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
var windowHeight = $(window).height();
var documentHeight = $(document).height();
var scrollPercent = (scrollTop + windowHeight) / documentHeight;
if (scrollPercent >= 0.5) {
$('#whatsapp-button').addClass('visible');
} else {
$('#whatsapp-button').removeClass('visible');
}
});
});
//]]>
</script>
Importante: reemplaza el número de teléfono por tu número de WhatsApp, incluyendo el código de país.
Opción dos que el Botón Flotante de WhatsApp aparezca al final de la página
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function($) {
// Agregar el botón si aún no está en el HTML
if ($('#whatsapp-button').length === 0) {
$("body").append(
"<a href='https://api.whatsapp.com/send?phone=513113665766&text=Hola%2C%20necesito%20información' id='whatsapp-button' class='float-wa' target='_blank' title='Escríbenos por WhatsApp'>💬</a>"
);
}
// Verifica si está al final de la página
$(window).scroll(function () {
var scrollBottom = $(window).scrollTop() + $(window).height();
var documentHeight = $(document).height();
if (scrollBottom >= documentHeight - 10) {
$('#whatsapp-button').addClass('visible');
} else {
$('#whatsapp-button').removeClass('visible');
}
});
});
//]]>
</script>
Importante: reemplaza el número de teléfono por tu número de WhatsApp, incluyendo el código de país.
Opción tres que el Botón Flotante de WhatsApp aparezca desde el inicio de la página:
Si deseas que el botón flotante esté visible todo el tiempo, no agregues el script anterior y modifica el estilo cambiando opacity: 0; por opacity: 1;.
Mejora tu blog con atención directa colocando este Botón Flotante de WhatsApp
Un botón flotante de WhatsApp mejora la usabilidad móvil y permite a tus visitantes contactarte en tiempo real, sin necesidad de correos ni formularios complicados. Si tu blog es comercial, educativo o personal, este pequeño detalle puede marcar la diferencia en la interacción con tu audiencia.
Conclusión
Agregar un botón flotante de WhatsApp en Blogger es fácil, rápido y gratuito. Solo necesitas insertar el código correctamente y personalizarlo con tu número. Así ofreces una experiencia más cercana y profesional a tus visitantes.
¿Qué te pareció este tutorial? Déjanos un comentario si te funcionó, si te resultó fácil o si tuviste algún inconveniente con la plantilla. Suscríbete a nuestro canal de YouTube, donde subimos tutoriales sobre Blogger de forma eventual.
Eso es todo, esperamos que esta información te sea útil.
.png')
No hay comentarios.:
Publicar un comentario