jEN961bnoHWNuQxXMHOhiOEF8a0k3e3ubeGH0V3g
Dirman.web.id - Narablog - mas Dirman

Pop up Notifikasi: Fungsi dan Cara Mudah Membuatnya

Jasa Social Media Marketing
Panduan ini insyaAllah bisa diterapkan di semua platform/cms website/blog termasuk Blogger dan WordPress.

Saat berkunjung ke sebuah situs website atau blog, kita sering mendapatkan sebuah notifikasi yang secara tiba-tiba muncul di layar atau beberapa saat setelah kita masih berada di halaman tersebut. Jendela kecil itu bernama Pop up Notification. Fungsi atau kegunaannya bermacam-macam, seperti beberapa contoh berikut.

#1 Menyampaikan Informasi

Sebuah website maupun blog, biasanya telah dilengkapi oleh beberapa metode penyampaian informasi tambahan sesuai dengan kebijakan atau kebutuhan,  salah satunya berupa tampilan layanan iklan dari pihak ketiga yang terpasang untuk tujuan mendapatkan klik berbayar.

Pop up Notifikasi: Fungsi dan Cara Mudah Membuatnya

#2 Sistem Pemberitahuan

Terkait beberapa hal, pop up notifikasi ini juga seringkali digunakan sebagai sistem informasi yang memiliki kemampuan mendeteksi kemudian memberitahukan jika ada suatu sistem yang dibutuhkan oleh website, seperti saran agar pengakses membuka fasilitas antiblok pada browser yang digunakan dan lain sejenisnya.

#3 Media Informasi

Pop up notifikasi juga biasanya digunakan dan diterapkan pada website/blog yang sedang memiliki kebutuhan untuk menyampaikan informasi cepat kepada pengaksesnya berupa informasi promosi, diskon atau rujukan ke halaman situs lain yang diharapkan memiliki nilai manfaat.

#4 Alat Persetujuan

Salah satunya adalah permintaan persetujuan untuk Cookie Website seperti yang disarankan oleh Google dan mulai diberlakukan untuk beberapa negara tertentu sesuai dengan kebijakannya.

Apa itu Cookie Website?
Singkatnya, cookie situs web adalah sebuah kemampuan berupa sistem maupun file yang yang disimpan dan dijalankan di perangkat pengguna untuk melacak aktivitas dan preferensi pengunjung saat mengakses website tersebut.

Cookie memungkinkan situs web untuk mengingat informasi pengguna, sehingga dapat membantu sebagai acuan untuk meningkatkan pengalaman menjelajah menjadi lebih mudah dan tepat sasaran.

Cara Membuat Pop up Notifikasi (HTML+CSS+JavaScript)

mas Dirman sendiri menggunakan cara ini di blog Dirman.web.id. Selain lebih mudah untuk diterapkan, pop up notifikasi dengan bahasa program html, css dan javascript juga lebih sederhana sehingga tidak akan terlalu memiliki pengaruh yang signifikan terhadap kecepatan website/blog.

Persiapan

Sebelum menerapkan cara membuat pop up notifikasi, disarankan agar melakukan backup terlebih dahulu untuk kode html dan css website saat ini. Langkah ini sangat penting dilakukan untuk menghindari hal krusial yang tidak diinginkan saat kemungkinan terjadinya kegagalan penerapan.

Langkah Pertama

Salin dan simpan kode berikut menggunakan alat editorial yang biasanya sudah tersedia di perangkat seperti notepad, notepad++ dan alat editor lainnya.
/* Awal CSS Popup */
        <style>
        .popup-container {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }
        .popup-content {
            position: relative;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            width: 90%;
            max-width: 400px;
            text-align: center;
        }
        .popup-content img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
        }
        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: transparent;
            color: black;
            border: none;
            width: 25px;
            height: 25px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 50%;
        }
        </style>
/* Akhir CSS Popup */

<!-- Awal Notifikasi Pop up -->    
<div class='popup-container' id='popup' onclick='closePopup()'>
        <div class='popup-content'>
            <button class='close-btn' onclick='closePopup()'>&#10008;</button>
            <a href='https://www.dirman.web.id/p/dukung-kreator.html' target='_blank'>
                <img alt='Dukung Kreator Konten Dirman.web.id' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaH9PgoXCOklUAT02ZcSGxbtAnR19WS3ZqeqcOuf0KRSBLmdRINkQazSd9NvvD9xVzd-t4fggNZ78gFFTm6iPM75Xxk1wxaipVE0KTUhem9krY9pAivUdxQ3xOJgyRdrdNmwkqosUp1PfOdS61CF174eGXkz5ksiAabYP7-IiiDRDaYVYyuVdUhE7J/s1600/dukung-kreator-konten-dirman-web-id-blog.png'/>
                  </a>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let popupLastShown = localStorage.getItem("popupLastShown");
            let now = new Date().getTime();
            let oneDay = 24 * 60 * 60 * 1000; // 24 jam dalam milidetik
            
            if (!popupLastShown || now - popupLastShown > oneDay) {
                setTimeout(function() {
                    document.getElementById("popup").style.display = "flex";
                }, 30000); // Muncul setelah 30 detik
            }
        });

        function closePopup() {
            document.getElementById("popup").style.display = "none";
            localStorage.setItem("popupLastShown", new Date().getTime());
        }
    </script>
<!-- Akhir Notifikasi Pop up -->

Langkah Kedua

Pasangkan kode CSS yang diawali dengan tanda /* Awal CSS Popup */ dan diakhiri tanda /* Akhir CSS Popup */ tepat di atas kode </head>

Langkah Ketiga

Pasangkan kode HTML dan JavaScript yang diawali dengan tanda <!--Awal Notifikasi Pop up--> dan diakhiri tanda <!--Akhir Notifikasi Pop up--> tepat di atas kode </body>
Catatan: Silakan sesuaikan alamat link url tujuan dan lokasi gambar untuk pop pup notifikasi.

Selesai

Simpan dan buka website/blog untuk melihat hasilnya.

Fitur Pop up

Dengan menerapkan kode ini, pop up akan memiliki fitur sebagai berikut:
  • Notifikasi berupa pop up akan muncul setelah 30 detik
  • Lebih menarik karena dapat menyesuaikan gambar dan link ke halaman website tujuan informasi
  • Tersedia tombol untuk menutup pop up
  • Responsive dan Mobile Friendly sehingga dapat menyesuaikan layar saat menggunakan perangkat desktop atau smartphone
  • Dilengkapi dengan kemampuan sessionStorage sehingga pop up hanya akan muncul sekali per sesi setelah ditutup atau di klik
  • Menggunakan metode localStorage sehingga pop up akan muncul setiap 24 jam sekali

Penutup

Silakan coba terapkan kode html, css dan javascript untuk melengkapi fitur pop up notifikasi di web maupun blog. Kode dapat dengan bebas diedit atau ditambahkan sesuai dengan kebutuhan masing-masing. Semoga bermanfaat!

Q & A

Ada pertanyaan atau menemukan kesulitan? silakan bergabung di ➤ Grup Telegram untuk diskusi.

Sumber referensi kode: https://www.w3schools.com/HOWTO/howto_js_popup.asp
Dukung Kreator Dirman.web.id

20 komentar

✔ Silakan bebas berkomentar sesuai dengan topik pembahasan di artikel ini.
✔ Centang kolom Beri Tahu Saya/Notify Me untuk mendapatkan notifikasi respon komentar.
  1. Terimakasih banyak udah sharing ilmunya Kak, bermanfaat sekali ini. Aku mau coba juga ah ngikutin tutorialnya hihi

    BalasHapus
    Balasan
    1. sama-sama, kak... silakan dicoba, semoga bermanfaat.

      Hapus
  2. Dari pertama bikin web, satu hal yang paling dihindari salah satunya pakai pop-up notif. Karena beberapa pengguna merasa unconfortable sama notif yang sering muncul pas lagi enak-enak baca, komen atau berinteraksi sama web. Tapi mungkin masih banyak juga yang nggak masalah dengan pop-up notif. :)

    BalasHapus
    Balasan
    1. Benar, kak.. sebenarnya saya termasuk yang seperti kak Dinda sampaikan juga :))

      Namun terkadang ada juga kebutuhan untuk menampilkan popup sebagai salah satu bentuk notifikasi langsung di website, seperti toko online yang ingin menampilkan informasi promo/diskon misalnya.

      Makanya saya coba dengan kondisi khusus seperti fitur popup yang disampaikan di artikel ini yang bisa diedit sesuai dengan kebutuhan dan kenyamanan masing-masing.

      Hapus
    2. Sama seperti teman-teman Kak Dinda, aku pun sering terganggu dengan pop up ini. Apalagi kalau baca webnya pake hp. Layar penuh aja dengan iklan.

      Tapi ... kalau masih banyak yang pakai, berarti masih banyak yang merasakan manfaatnya.

      Hapus
    3. Sepakat dengan Kak Dinda. Namun kadang ada beberapa situs yang menerapkan pop up notifikasi seperti persetujuan cookie kan, jadi bisa tahu juga kitanya selaku pengunjung ke situs tersebut.

      Hapus
  3. Terimakasih orang baik atas scriptnya ijin untuk dicopy paste nanti diulik buat blog saya.

    BalasHapus
    Balasan
    1. Silakan, kak. Semoga bisa berjalan dengan baik di blognya, ya...

      Hapus
  4. Pop-up memang penting, tapi jangan terlalu banyak ya. Pengunjung bisa jadi terganggu.hehehehe gunakan sepentingnya dan sebaik mungkin biar bisa memberi kenyamanan buat pembaca juga

    BalasHapus
    Balasan
    1. Setuju.. makanya saya coba dengan fitur ditampilkan setelah beberapa waktu dan sekali muncul per sesi tapi akan muncul kembali setelah 24 jam. Salah satu tujuannya adalah supaya tidak terlalu menganggu :)

      Hapus
  5. Dulu saya seneng banget nih pake pop up kayak ginian kalau lagi desain web. Pada saat itu nganggepnya "wahh harus ditambahin pop up nih biar terkesan lebih professional". Tapi lama kelamaan, setelah merasa tau bahwa pop up itu kadang ngeribetin, dan cenderung ngeribetin meskipun kita cukup klik tombol silang aja. Semenjak itu, saya tidak pakai pop up lagi :)))

    BalasHapus
    Balasan
    1. Setuju Kak Mario. Saya juga merasa adanya pop up seperti itubukan keren, tapi ribet dan mengganggu.
      Tapi ya kembali ke yg punya blog sih ya
      Kalau ha ada kewajiban saya malas baca atau berkunjung ke blog yg ada pop up nya gitu

      Hapus
  6. Eeh tapiii saya jujur saja nih, klo ada pop up sering merasa terganggu. Makin banyak pop up makin sering merasa terganggunya

    BalasHapus
  7. Ada juga pop up notifikasi yang isinya iklan kak.

    Selagi gak mengganggu, sih wajar. Aku mah fine fine aja. Kecuali jika munculnya terus menerus dan sulit diskip. Maka akan mengurangi experience pengunjung

    BalasHapus
  8. Saya termasuk yang cukup terganggu kalau ada pop up notifikasi ketika berkunjung ke suatu website. Tapi ada juga yang harus diikuti karena ada permintaan persetujuan untuk Cookie Website

    BalasHapus
  9. Oh teryata cookie situs web tuh fungsinya bisa untuk mengingat informasi pengguna juga ya. Mungkin tergantung kebutuhan situs web juga kali ya, ada juga yang tidak perlu mengandalkan cookie ini.

    BalasHapus
  10. Pas buka blognya, ada pop up, keren kaliiii...eh ada tutorialnya, ntar deh pelan-pelan dicoba terapkan kode html, css dan javascript untuk melengkapi fitur pop up notifikasi di blog saya

    BalasHapus
  11. jujurly sih saya gak nyaman dengan adanya pop up notifikasi gitu, jadi kayak mengganggu kenyamanan membaca aja gitu tapi semua tergantung yang punya blog atau web sih ya. Anyway thanks ya tutorialnya, pasti berguna banget nih buat yang ingin pasang pop up notifikasi juga di webnya :)

    BalasHapus
  12. lha ternyata gini caranya wkwk
    aku sering ngelihat web yang ada pop up nya gini emang jadi lebih menarik
    boleh nih dicoba. tapi bisa diatur kan ya munculnya di waktu tertentu aja?

    BalasHapus
    Balasan
    1. Bisa, kak.. silakan dicoba disesuaikan seting waktunya seperti yang dibutuhkan :)

      Hapus
Aset Digital Marketing Bisnis Online
Let's talk about cookies first...
We serve cookies on this blog to analyze traffic, recognize your preferences and optimize your experience. This includes personalized content and advertising.
More Details