Membuat Web Push Notification Blogger Dengan WhatsApp Aja

Web Push Notification Real Time otomatis adalah fitur teknologi pada website yang memungkinkan pemilik situs mengirimkan pesan atau notifikasi secara langsung dan instan (real-time) ke perangkat pengguna, bahkan ketika pengguna tidak sedang membuka website tersebut. Pesan ini muncul seperti notifikasi aplikasi—biasanya di pojok kanan atas atau bawah layar pengguna—dan bersifat otomatis, artinya dapat dikirim berdasarkan tindakan tertentu atau jadwal tertentu tanpa harus dilakukan secara manual.

Ciri-ciri Utama Web Push Notification Real Time Otomatis:

1. Real-Time: Notifikasi dikirim secara langsung saat peristiwa terjadi, tanpa jeda.

2. Otomatis: Sistem dapat mengirim notifikasi berdasarkan trigger tertentu, seperti:

   • Artikel baru dipublikasikan

   • Ada promo terbatas

   • Pengguna meninggalkan keranjang belanja (untuk e-commerce)

3. Cross-Platform: Bisa diterima di berbagai browser seperti Chrome, Firefox, atau Edge, baik di desktop maupun mobile (selama browser mendukungnya).

4. Tanpa membuka website: Pengguna bisa menerima notifikasi meskipun tidak sedang mengakses situs yang bersangkutan.

Contoh Penggunaan:

• Website berita mengirimkan notifikasi saat ada breaking news.

• Toko online mengingatkan pengguna tentang diskon Flash Sale.

• Platform edukasi memberi tahu ada webinar yang akan dimulai.

Keuntungan:

• Engagement lebih tinggi karena pengguna langsung mendapat info penting.

• Meningkatkan Travik ke website anda.

• Mendukung otomatisasi marketing dengan pesan yang relevan dan tepat waktu.

/*Accordion subscribe*/

.accordion-container-blogspot {
    max-width: 600px;
    margin: 0 auto;
}

.accordion-blogspot {
    background-color: #4CAF50;
    color: white;
    padding: 15px;
    width: 100%;
    text-align: left;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 10px;
    display: block;
    user-select: none;
}

.accordion-blogspot:hover {
    background-color: #45a049;
}

input[type="checkbox"] {
    display: none;
}

.panel-blogspot {
    padding: 15px;
    background-color: #f9f9f9;
    display: none;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
}

input[type="checkbox"]:checked + .panel-blogspot {
    display: block;
}

.panel-blogspot p {
    margin: 0;
    font-size: 14px;
    color: #333;
}

/*Web push notifikasi*/

.blogcepot-popup-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #1d1f22;
    color: #ffffff;
    z-index: 9999;
    padding: 20px;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.4);
    display: none;
    animation: blogcepot-fadeInUp 0.5s ease-in-out;
}

.blogcepot-popup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.blogcepot-logo {
    width: 60px;
    margin-bottom: 10px;
    border-radius: 50px;
}

.blogcepot-text {
    font-size: 16px;
    margin-bottom: 20px;
    color: #ffffff;
}

.blogcepot-popup-buttons {
    display: flex;
    gap: 20px;
}

.blogcepot-btn-primary {
    background-color: #f59e0b;
    border: none;
    color: white;
    padding: 10px 25px;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
}

.blogcepot-btn-secondary {
    background: none;
    border: none;
    color: #f59e0b;
    font-size: 16px;
    cursor: pointer;
}

@keyframes blogcepot-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

<script>
  function dismissPopup(minutes) {
    const now = new Date().getTime();
    const delay = minutes * 60 * 1000; // Convert minutes to milliseconds
    localStorage.setItem("popupDismissedUntil", now + delay);
    document.getElementById("popup").style.display = "none";
  }

  function redirectToBlogcepot() {
    // Redirect to blogcepot.com
    window.location.href = "https://whatsapp.com/channel/0029VbALMCz1NCrZfQFort11";
    
    // Hide popup and set the 7-day dismissal
    const now = new Date().getTime();
    const delay = 7 * 24 * 60 * 60 * 1000; // 7 days in milliseconds
    localStorage.setItem("popupDismissedUntil", now + delay);
    document.getElementById("popup").style.display = "none";
  }

  function shouldShowPopup() {
    const dismissedUntil = localStorage.getItem("popupDismissedUntil");
    const now = new Date().getTime();
    return !dismissedUntil || now > dismissedUntil;
  }

  window.onload = function () {
    if (shouldShowPopup()) {
      setTimeout(() => {
        document.getElementById("popup").style.display = "block";
      }, 15000); // Popup appears after 15 seconds
    }
  };
</script>

<div id="popup" class="blogcepot-popup-container">
  <div class="blogcepot-popup-content">
    <img src="https://i.ibb.co.com/Gvy9CS9R/FB-IMG-1744933057589.jpg" alt="Logo" class="blogcepot-logo" />
    <p class="blogcepot-text">Ingin terima notifikasi ketika<br />ada update artikel terbaru?</p>

    <div class="accordion-container-blogspot">
      <label class="accordion-blogspot" for="section1">Lihat Panduan !</label>
      <input type="checkbox" id="section1" />
      <div class="panel-blogspot">

        <img src="https://i.ibb.co.com/tPcxBMGd/20250418-065907.jpg" alt="20250418-065907" style="width:100%; height:auto; border-radius:10px;" border="0" />
        <br /><br />

        <img src="https://i.ibb.co.com/JFKYbDGL/20250418-070023.jpg" alt="20250418-065907" style="width:100%; height:auto; border-radius:10px;" border="0" />
        <br /><br />

        <img src="https://i.ibb.co.com/gZ1KGfZv/20250418-070106.jpg" alt="20250418-065907" style="width:100%; height:auto; border-radius:10px;" border="0" />
        <br /><br />

        <img src="https://i.ibb.co.com/MxZzwyzD/20250418-070245.jpg" alt="20250418-065907" style="width:100%; height:auto; border-radius:10px;" border="0" />

      </div>
    </div>
  </div>
</div>

<img src="https://i.ibb.co.com/tPcxBMGd/20250418-065907.jpg" alt="20250418-065907" style="width:100%; height:auto; border-radius:10px;" border="0" />
        <br /><br />

        <img src="https://i.ibb.co.com/JFKYbDGL/20250418-070023.jpg" alt="20250418-065907" style="width:100%; height:auto; border-radius:10px;" border="0" />
        <br /><br />

        <img src="https://i.ibb.co.com/gZ1KGfZv/20250418-070106.jpg" alt="20250418-065907" style="width:100%; height:auto; border-radius:10px;" border="0" />
        <br /><br />

        <img src="https://i.ibb.co.com/MxZzwyzD/20250418-070245.jpg" alt="20250418-065907" style="width:100%; height:auto; border-radius:10px;" border="0" />