¡Haz que tu Blog Hable Solo!
¿Alguna vez has querido que tu blog interactúe con tus lectores sin interrumpir su lectura? Las notificaciones flotantes son la respuesta. Pequeñas, efectivas y visualmente atractivas, estas burbujas de información aparecen en pantalla con un solo objetivo: captar la atención de tus visitantes en el momento justo.
- ✅ ¿Promoción de productos?
- ✅ ¿Anuncio de una nueva entrada?
- ✅ ¿Ofertas por tiempo limitado?
- ✅ ¿Invitación a seguirte en redes sociales?
Todo es posible con un sistema bien configurado de notificaciones flotantes. Se adaptan a cualquier diseño y no necesitan herramientas externas ni plugins pesados. Además, puedes personalizar colores, posiciones, duración y hasta animaciones. ¡Tu blog puede tener su propio estilo de interacción sin volverse invasivo!
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<div class='fix-notif'>
<a href='#' title='Blanter Tokoshop' target='_blank'><b>Acceso!</b> Notificación V1.2</a>
</div>
<div class='fix-notif terbaik'>
<a href='#' title='Masign Asuka' target='_blank'><b>Acceso!</b> Notificación Premium V1.8</a>
</div>
<a class='close-fixed' href='javascript:void'><i class='fa fa-close'></i></a>
a:link{text-decoration:none;color:#444;}
body{background:#f1f1f1;font-family:'Roboto';}
.fix-notif{background:#fff;position:fixed;bottom:90px;left:35px;z-index:99;border-radius:7px;padding:15px;box-shadow:0 1px 6px rgba(32,33,36,.28);font-size:14px;font-weight:bold;animation-name:fromleft;animation-duration:4s;}
.fix-notif b{background:#3F51B5;font-size:13px;padding:5px 8px;border-radius:5px;color:#fff;margin-right:5px;}
.fix-notif.terbaik{bottom:35px;animation-duration:3s;}
.fix-notif.terbaik b{background:#FF9800;}
.close-fixed{position:fixed;z-index:99;background:#fff;padding:3px 7px;border-radius:100%;box-shadow:0 1px 6px rgba(32,33,36,.28);left:5px;bottom:75px;animation-name:closeleft;animation-duration:5s;}
.fix-notif.hidden,.close-fixed.hidden{display:none;}
@keyframes fromleft{0%{left:-300px;}100%{left:35px;}}
@keyframes closeleft{0%{left:-300px;}100%{left:5px;}}
$(document).ready(function(){$(".close-fixed").click(function(){$(".fix-notif,.close-fixed").toggleClass("hidden")})})
Implementar notificaciones flotantes en Blogger es más sencillo de lo que parece. Con solo unos cuantos bloques de código HTML, CSS y JavaScript, puedes transformar la experiencia del visitante y convertir tu blog en un espacio más interactivo, moderno y persuasivo.
Estas notificaciones no solo mejoran la comunicación con tus lectores, sino que también pueden impulsar conversiones, aumentar el tiempo de permanencia y reforzar el branding de tu sitio.
