Cara Membuat Snackbar atau Toast

Ada yang pernah mendengar kata snackbar? Mungkin yang sering makan pasti pernah dengar bahkan ketagihan.
Tetapi snackbar yang saya singgung disini bukanlah makanan tetapi sebutan untuk sebuah notifikasi yang muncul dibawah layar ketika memasukan data tertentu.

Snackbar atau bisa juga disebut dengan toast sangat jarang dipakai pada website, mungkin karena memperlambat situs? Saya sudah mencoba memasang Snackbar ini dan tidak ada masalah sama sekali pada blog saya.

Ya udah, daripada kita basa basi gak jelas, ayo kita langsung menuju cara membuat snackbar pada Blog anda...

Masukan kode CSS

Kode Cascading Style Sheet berikut dimasukkan pada bagian <style>, berarti sesudah <style> atau sebelum </style>

CSS/* CSS Snackbar */
#snackbar {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 30px;
}
/* Visiblity snackbar */
#snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* keyframe untuk menghilangkan dan menggerakkan snackbar */
@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

Lihat bahwa pada CSS kali ini terdapat syntax @keyframes. Saya kurang ahli dalam hal CSS tapi kalian bisa membaca artikel berikut ini yang membahas tentang keyframes
https://webdesign.tutsplus.com/id/tutorials/a-beginners-introduction-to-css-animation--cms-21068

Masukan kode javascript

Masukan script berikut sesudah </style> atau sebelum </html>

JS.  function myFunction() {
    var x = document.getElementById("snackbar")
    x.className = "show";
    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}

Jangan Lupa bahwa bahasa program javascript harus dibungkus dengan tag <script> dan </script> agar dikenali oleh browser bahwa itu adalah sebuah script.

Masukan kode HTML

Masukan kode Hyper Text Markup Language berikut kedalam artikel anda pada tab HTML bukan Compose! Jika kalian bingung, ada 2 tab disudut kiri atas dokumen yaitu tab compose dan tab HTML. Pilih html lalu masukan kode berikut dimana kamu ingin meletakkan tombol snackbarnya.

HTML<!-- Tombol snackbar -->
<button onclick="myFunction()">Tampilkan Snackbar</button>

<!-- snackbar yang akan muncul -->
<div id="snackbar">
Tulis pesan anda disni..
</div>

Sekarang snackbar anda sudah jadi dan siap pakai.

Demo

× Info! Kamu hanya bisa menggunakan 1 snackbar pada setiap artikel tetapi bisa menggunakan banyak tombol untuk mengaktifkan snackbar pada artikel tersebut