Membuat Pemberitahuan No Internet Di Blog

 

Hallo sobat radio Konoha, pada kesempatan kali ini saya akan membagikan sedikit wawasan saya di bidang perbloggeran. Pada kesempatan ini saya akan memberikan Tutorial Cara Membuat Tampilan Tidak Ada Internet Di Blogger Seperti Template Median U Atau Plus UI. 

Tampilan tidak ada internet di blog ini nantinya akan otomatis muncul kepada pengunjung yang sedang mengunjungi blog anda namun kondisi internet sedang tidak tersedia.

untuk melihat hasil tampilan widget tidak ada internet di blog anda, anda dapat mencoba mengunjungi blog anda dengan data internet di nonaktifkan atau di matikan.

Anda dapat melihatnya langsung tanpilan No Internet Pada Tombol Berikut Ini. Pastikan Saat Menekan Tombol Lihat Demo Internet Anda Di Nonaktifkan Ya Agar Widgetnya Berfungsi.

Lihat Demo

Memasang Tampilan Tidak Ada Internet Di Blog

Masuk ke blogger anda >> Pengaturan Tema >> Edit Html >> salin kode javascript di bawah ini.

<script>
  function showOfflineMessage() {
    document.body.innerHTML = `
      <style>
        .offline-page {
          background-color: #fff;
          color: inherit;
          height: 100vh;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          font-family: 'Segoe UI', sans-serif;
          padding: 20px;
        }
        .offline-page img {
          width: 160px;
          margin-bottom: 20px;
          border-radius: 16px;
          animation: float 2s ease-in-out infinite;
        }
        @keyframes float {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-10px); }
        }
        .offline-page h1 {
          font-size: 24px;
          margin-bottom: 10px;
        }
        .offline-page p {
          font-size: 16px;
          opacity: 0.8;
        }
      </style>
      <div class="offline-page">
        <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAA..." />
        <h1>Oops! Kamu sedang offline</h1>
        <p>Silakan periksa koneksi internet kamu dan coba lagi.</p>
      </div>
    `;
  }
</script>

pasang kode javascript tersebut sebelum kode </body>, nanti Tampilan No Internet Atau Tampilan Pemberitahuan Tidak Ada Internet Di Blog Anda akan otomatis muncul jika pengunjung anda tidak memiliki internet saat mengunjungi blog anda.

Disclaimer:

Kode yang saya bagikan ini adalah kode milik wendycode.com yang di bahas di artikel blog tersebut.

Rate This Article

Thanks for reading: Membuat Pemberitahuan No Internet Di Blog, Sorry, my English is bad:)