Breaking

Post Top Ad

Your Ad Spot

domingo, 10 de marzo de 2019

Crear barra de notificaciones superior con HTML y CSS

Top Notification Bar o Hello Bar es la mejor manera de dirigir a sus visitantes y promover el contenido más importante del sitio web. Use la barra de notificaciones superior para promocionar productos o mostrar notificaciones importantes para obtener el máximo alcance. En este tutorial, le mostraremos cómo crear una barra de saludo o barra de notificación para su sitio web.
Antes de comenzar a crear una barra de notificaciones superior, eche un vistazo a algunos de los beneficios de colocar una barra de saludo en su sitio web.
  • Promover productos para vender más.
  • Aumente los "me gusta" sociales colocando los botones de redes sociales.
  • Mostrar noticias y eventos para atraer a los visitantes.
  • Crecer suscriptores ofreciendo formulario de suscripción.
Es muy fácil crear una barra de notificación fija superior utilizando HTML y CSS. Además, puede usar jQuery para agregar una funcionalidad cercana en la barra de navegación superior. Aquí proporcionaremos un script simple para agregar una barra de notificación superior al sitio web utilizando HTML, CSS y jQuery.

código HTML

El siguiente HTML muestra una barra de notificación fija en la parte superior de la página web con un icono de cierre.
< 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ístrese en CodexWorld Learning Week y obtenga acceso GRATUITO a más de 1000 tutoriales y scripts en todos los programas </ span > </ p >
            </ div >
        </ div >
        < Un  href = "http://www.codexworld.com"  diana = "_blank"  clase = "HB-cta-botón cta hb-" >
            < div  class = "hb-text-holder" >
                < p > Registrarse ahora </ p >
            </ div >
        </ a >
    </ div >
    < div  class = "hb-close-wrapper" >
        < a  href = "javascript: void (0);"  class = "icon-close" > & # 10006; </ a >
    </ div >
</ div >

Código CSS

El siguiente CSS se utiliza para diseñar y diseñar la barra de notificaciones superior y el contenido relativo.
cuerpo {
     margen :  0 ;
    relleno :  0 ;
    ancho :  100 % ;
}
# hellobar-bar {
     font-family :  "Open Sans" , sans-serif ;
    ancho :  100 % ;
    margen :  0 ;
    altura :  30 px ;
    pantalla : tabla;
    tamaño de letra :  17 px ;
    peso de la fuente :  400 ;
    relleno :  .33 em  .5 em ;
    -webkit- font -smoothing : antialiased;
    color :  # 5c5e60 ;
    posición :  fijo ;
    color de fondo :  blanco ;
    caja-sombra :  0  1 px  3 px  2 px  rgba ( 0,0,0,0.15 );
}
# hellobar-bar .regular {
     altura :  30 px ;
    tamaño de letra :  14 px ;
    relleno :  .2 em  .5 em ;
}
.hb-content-wrapper {
     text-align :  center ;
    text-align :  center ;
    posición :  relativa ;
    pantalla : tabla-celda;
    alineación vertical :  medio ;
}
.hb-content-wrapper  p {
     margin-top :  0 ;
    margen inferior :  0 ;
}
.hb-text-wrapper {
     margen derecho :  .67 em ;
    pantalla :  bloque en línea ;
    altura de la línea :  1.3 ;
}
.hb-text-wrapper  .hb-headline-text {
     font-size :  1 em ;
    pantalla :  bloque en línea ;
    alineación vertical :  medio ;
}
# hellobar-bar  .hb-cta {
     display :  inline-block ;
    alineación vertical :  medio ;
    margen :  5 px  0 ;
    color :  #ffffff ;
    color de fondo :  # 22af73 ;
    color de borde :  # 22af73
}
.hb-cta-button {
     opacidad :  1 ;
    color :  #fff ;
    pantalla :  bloque ;
    cursor :  puntero ;
    línea de altura :  1.5 ;
    ancho máximo :  22.5 em ;
    text-align :  center ;
    posición :  relativa ;
    radio del borde :  3 px ;
    espacio en blanco :  nowrap ;
    margen :  1,75em  auto  0 ;
    texto-decoración :  ninguno ;
    relleno :  0 ;
    desbordamiento :  oculto ;
}
.hb-cta-button  .hb-text-holder {
     radio-borde :  heredar ;
    Relleno :  5 px  15 px ;
}
.hb-close-wrapper {
     display : table-cell;
    ancho :  1.6 em ;
}
.hb-close-wrapper  .icon-close {
     font-size :  14 px ;
    superior :  15 px ;
    derecha :  25 px ;
    ancho :  15 px ;
    altura :  15 px ;
    opacidad :  .3 ;
    color :  # 000 ;
    cursor :  puntero ;
    posición :  absoluta ;
    text-align :  center ;
    altura de línea :  15 px ;
    índice z :  1000 ;
    texto-decoración :  ninguno ;
}

Top Bar Cerrar Funcionalidad

Se utilizará una línea de jQuery para ocultar la barra de notificaciones superior en un botón (x) clic.
Ya que usaremos jQuery, incluya primero la biblioteca jQuery.
< script  src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" > </ script >
Para ocultar la barra de notificaciones, use jQuery fadeOut()en el onclickcaso del enlace de anclaje de cierre (x).
< a  href = "javascript: void (0);"  class = "icon-close"  onclick = "$ ('# hellobar-bar'). fadeOut ()" > & # 10006; </ a >

Conclusión

En el script de ejemplo, hemos creado una barra de notificación superior simple con un contenido básico con HTML y CSS. Puede cambiar el contenido y el estilo de la barra de notificaciones superior según sus requisitos.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas