Membuat Bar Notifikasi dengan HTML dan JQuery

Membuat Bar Notifikasi dengan HTML dan JQuery - Bar Notifikasi atau Hello Bar adalah cara terbaik untuk mengarahkan pengunjung kalian dan mempromosikan konten terpenting situs web. Gunakan ar notifikasi untuk mempromosikan produk atau tampilkan pemberitahuan penting untuk jangkauan yang lebih maksimal. Dalam tutorial ini, saya akan menunjukkan kepada kalian cara membuat Hello bar atau bar notifikasi untuk website kalian.

Sebelum kalian mulai membuat bar notifikasi, lihat beberapa manfaat menempatkan Hello Bar ke situs web kalian

•      Promosikan produk untuk meningkatkan penjualan.
•      Tingkatkan like pada sosial media dengan menempatkan tombol sosial media.
•      Tampilkan berita dan acara untuk menarik pengunjung.
•      Tumbuhkan subscriber dengan menawarkan form subscribe email.

Sangat mudah untuk membuat bar notifikasi fixed di bagian atas website menggunakan HTML dan CSS. kalian juga dapat menggunakan jQuery untuk menambahkan fungsionalitas yang dekat pada bar navigasi atas. Di sini saya akan menyediakan kode sederhana untuk menambahkan bar notifikasi ke website menggunakan HTML, CSS, dan jQuery.

Kode HTML

Kode HTML berikut akan memunculkan bar notifikasi dengan tombol close.

<div id="hellobar-bar" class="regular closable">
    <div class="hb-content-wrapper">
        <div class="hb-text-wrapper">
            <div class="hb-headline-text">
                <p><span>Register for CodexWorld Learning Week and get FREE access to 1000+ tutorials and scripts across programs</span></p>
            </div>
        </div>
        <a href="http://www.codexworld.com" target="_blank" class="hb-cta hb-cta-button">
            <div class="hb-text-holder">
                <p>Register Now</p>
            </div>
        </a>
    </div>
    <div class="hb-close-wrapper">
<a href="javascript:void(0);" class="icon-close" onclick="$('#hellobar-bar').fadeOut()">&#10006;</a>    </div>
</div>

Kode CSS

Kode CSS berikut akan memberikan style pada bar notifikasi yang membuatnya menjadi berada di bagian atas website.

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;
}

Jangan lupa hubungkan juga JQuery pada file kalian

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Baiklah, demikian artikel kali ini yang membahas tentang membuat bar notifikasi dengan HTML dan Jquery. Semoga bermanfaat.