Notifications
General
Advertisement
Advertisement

Cara membuat notifikasi browser alert di blogger

Hello sobat Bloggermuda kali ini admin bakalan menjabarkan mengenai bagaimana caranya membuat notifikasi browser saat di klik dengan tampilan sederhana

Notifikasi Browser

Apa itu notifikasi browser? Pada element browser terdapat berbagai perintah yang bisa di fungsikan menggunakan kode javascript, salah satunya adalah menampilkan alert atau notifikasi sederhana saat di klik ataupun saat mengunjungi halaman tertentu di dalam sebuah website

Menggunakan Javascript

Seperti yang sudah admin jabarkan sebelumnya bahwa untuk membuat notifikasi alert sederhana pada website menggunakan element kode javascript saja, tidak perlu lagi menggunakan kode CSS untuk membuat tampilannya, karena notifkasi tersebut menggunakan notifikasi alert dari browser, dan hal tersebut mudah untuk di lakukan karena penggunaan kode javascript yang simple dan mudah di ingat saat ingin menggunakannya

Muncul saat di klik

Menariknya dari tampilan notifikasi alert pada website tersebut hanya muncul saat di klik saja, nah kamu juga bisa mengatur pesan text yang muncul di dalam notifikasi tersebut untuk di tampilkan saat pengunjung mengklik tombol yang terdapat fungsi alert atau fungsi dari notifikasi tersebut

Contoh tampilan

Agar kamunya tidak penasaran dengan bagaimana kah contoh tampilan dari notifikasi alert pada website silahkan periksa menggunakan tombol di bawah ini

Info: Bagaiamana sobat dengan contoh tampilannya, sederhana dan juga elegan pastinya

Cara pembuatan

Baiklah sekarang saatnya admin bakalan menjabarkan mengenai bagaimana caranya membuat notifikasi alert yang muncul saat di klik di blogger secara mudah, silahkan pelajari dan ikuti setiap arahan yang admin jabarkan sebentar lagi

  1. Login ke blogger, terus pergi ke menu theme, dan pilih menu Edit HTML
  2. Selanjutnya salin kode javascript di bawah ini kemudian letakkan di atas kode </body>
  3. <script>
    function rahalert(){
    alert('Hi ini adalah notifikasi alert');}
    </script>

    Info: Ubah keterangan jika di perlukan, sesuai keinginan kamu aja

  4. Kemudian untuk menggunakan dan menampilkan notifikasi saat di klik silahkan tambahkan pada kode tombol onclick='rahalert()', atau jika bingung lihat seperti contoh kode di bawah ini
<div class='tombol' onclick='rahalert()'>
<!-- svg icon -->
</div>

Info: Kamu bisa menambahkan onclick='rahalert()' pada setiap tombol yang kamu inginkan secara manual

Post a Comment
Advertisement
Scroll to top