La barra de notificaciones es la mejor manera de dirigir a tus visitantes y promocionar el contenido más importante de tu web. Utilizar una barra de notificaciones ayuda a promocionar tus productos o a mostrar avisos de gran calado que sean de importancia para los usuarios. En este tutorial, veremos como crear una barra de notificaciones en la parte superior de la web para tu sitio web.
Antes de empezar a crear la barra de notificaciones, vamos a ver sus múltiples beneficios.
- Promocionar productos para aumentar sus ventas
- Incrementar la interacción con las redes sociales de la web
- Mostrar noticias y eventos que sean de interés de los usuarios
- Aumentar suscriptores mostrando el formulario de suscripción
Es muy sencillo crear una barra de notificaciones fija en la parte superior de la web utilizando HTML y CSS. También, puedes usar jQuery si quieres añadir funcionalidades concretas a la barra. En este artículo, te proporcionaremos un simple script para añadir una barra de notificaciones en la parte superior de la web utilizando HTML, CSS y jQuery.
Código HTML
El siguiente código HTML muestra una barra de notificaciones fija en la parte superior de la web, con un icono para cerrarla.
<div id="hellobar-bar" class="regular closable">
<div class="hb-content-wrapper">
<div class="hb-text-wrapper">
<div class="hb-headline-text">
<p><span>Regístrate ya en programacion.net y accederas a multitud de tutoriales gratuitos</span></p>
</div>
</div>
<a href="http://www.programacion.net" target="_blank" class="hb-cta hb-cta-button">
<div class="hb-text-holder">
<p>Regístrate</p>
</div>
</a>
</div>
<div class="hb-close-wrapper">
<a href="javascript:void(0);" class="icon-close">✖</a>
</div>
</div>
Código CSS
El siguiente código CSS lo utilizaremos para personalizar nuestra barra de notificaciones y su contenido.
body{
margin: 0;
padding: 0;
width: 100%;
}
#hellobar-bar {
font-family: "Open Sans", sans-serif;
width: 100%;
margin: 0;
height: 30px;
display: table;
font-size: 17px;
font-weight: 400;
padding: .33em .5em;
-webkit-font-smoothing: antialiased;
color: #5c5e60;
position: fixed;
background-color: white;
box-shadow: 0 1px 3px 2px rgba(0,0,0,0.15);
}
#hellobar-bar.regular {
height: 30px;
font-size: 14px;
padding: .2em .5em;
}
.hb-content-wrapper {
text-align: center;
text-align: center;
position: relative;
display: table-cell;
vertical-align: middle;
}
.hb-content-wrapper p {
margin-top: 0;
margin-bottom: 0;
}
.hb-text-wrapper {
margin-right: .67em;
display: inline-block;
line-height: 1.3;
}
.hb-text-wrapper .hb-headline-text {
font-size: 1em;
display: inline-block;
vertical-align: middle;
}
#hellobar-bar .hb-cta {
display: inline-block;
vertical-align: middle;
margin: 5px 0;
color: #ffffff;
background-color: #22af73;
border-color: #22af73
}
.hb-cta-button {
opacity: 1;
color: #fff;
display: block;
cursor: pointer;
line-height: 1.5;
max-width: 22.5em;
text-align: center;
position: relative;
border-radius: 3px;
white-space: nowrap;
margin: 1.75em auto 0;
text-decoration: none;
padding: 0;
overflow: hidden;
}
.hb-cta-button .hb-text-holder {
border-radius: inherit;
padding: 5px 15px;
}
.hb-close-wrapper {
display: table-cell;
width: 1.6em;
}
.hb-close-wrapper .icon-close {
font-size: 14px;
top: 15px;
right: 25px;
width: 15px;
height: 15px;
opacity: .3;
color: #000;
cursor: pointer;
position: absolute;
text-align: center;
line-height: 15px;
z-index: 1000;
text-decoration: none;
}
Función para cerrar la barra
Solo nos bastará una línea de jQuery para esconder la barra de notificaciones. Para ello utilizaremos un botón de cerrar, representando por el icono de una X. Así que, como vamos a utilizar jQuery, lo primero será incluir la librería.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Para esconder la barra, utilizaremos el evento onclick de jQuery para llamar a la función fadeOut() cuando se pulse en el enlace.
<a href="javascript:void(0);" class="icon-close" onclick="$('#hellobar-bar').fadeOut()">✖</a>
Fuente: codexworld.com