En este tutorial aprenderás a instalar un gadget de botones flotantes para compartir en redes sociales en Blogger. Esta función permanente en el lateral de tu pantalla permitirá a tus visitantes compartir tus publicaciones en Facebook, Twitter (X), WhatsApp y Telegram con un solo clic, aumentando el tráfico orgánico y la visibilidad de tu blog sin ralentizar la carga.
Ventajas de Usar Botones Flotantes en Tu Blog
- Mayor tasa de interacción: Al permanecer visibles mientras el usuario desplaza la página (scroll), aumentan drásticamente las probabilidades de que compartan tu contenido.
- Diseño 100% responsive y ligero: Elaborado exclusivamente con HTML y CSS puro, adaptándose perfectamente a pantallas móviles y de escritorio sin afectar PageSpeed.
- Aumento de tráfico social gratuito: Facilita que tus lectores difundan tus artículos en plataformas clave como WhatsApp, Facebook y Telegram de forma instantánea.
Pasos para Instalar el Gadget en Tu Plantilla
- Accede a tu panel de administración de Blogger y ve a la sección Diseño (o edita una entrada en modo Vista HTML).
- Haz clic en Añadir un gadget en la barra lateral o en la sección donde desees ubicar el código y selecciona HTML/JavaScript.
- Copia íntegramente el bloque de código provisto en la sección inferior de esta guía.
- Pega el código en el cuadro de texto del gadget sin modificar la estructura básica de los enlaces de interacción.
- Guarda los cambios del gadget, guarda el diseño general de la plantilla y comprueba cómo se visualiza la barra flotante en tu sitio.
Código HTML y CSS Completo para la Barra Flotante
<!-- Barra Flotante de Redes Sociales para Blogger -->
<style>
.social-floating-bar {
position: fixed;
top: 30%;
left: 0;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 8px;
}
.social-btn {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
color: #ffffff !important;
text-decoration: none;
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 14px;
border-radius: 0 6px 6px 0;
transition: transform 0.2s ease, background-color 0.2s ease;
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.social-btn:hover {
transform: translateX(5px);
}
.btn-facebook { background-color: #1877f2; }
.btn-twitter { background-color: #000000; }
.btn-whatsapp { background-color: #25d366; }
.btn-telegram { background-color: #0088cc; }
@media (max-width: 768px) {
.social-floating-bar {
top: auto;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
flex-direction: row;
}
.social-btn {
border-radius: 6px;
}
.social-btn:hover {
transform: translateY(-3px);
}
}
</style>
<div class="social-floating-bar">
<a class="social-btn btn-facebook" href="javascript:void(0)" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(location.href), '_blank');" title="Compartir en Facebook">FB</a>
<a class="social-btn btn-twitter" href="javascript:void(0)" onclick="window.open('https://twitter.com/intent/tweet?url=' + encodeURIComponent(location.href), '_blank');" title="Compartir en X">X</a>
<a class="social-btn btn-whatsapp" href="javascript:void(0)" onclick="window.open('https://api.whatsapp.com/send?text=' + encodeURIComponent(location.href), '_blank');" title="Compartir en WhatsApp">WA</a>
<a class="social-btn btn-telegram" href="javascript:void(0)" onclick="window.open('https://t.me/share/url?url=' + encodeURIComponent(location.href), '_blank');" title="Compartir en Telegram">TG</a>
</div>
