Cara Memasang Notifikasi Offline Profesional di Blog

Halo semua! Pada artikel kali ini, saya akan membagikan cara memasang notifikasi offline di blog. Fitur ini sangat berguna untuk meningkatkan pengalaman pengguna, terutama saat koneksi internet pengunjung tiba-tiba terputus.

Apa Itu Notifikasi Offline?

Kamu mungkin pernah melihat notifikasi seperti “You’re offline” ketika menggunakan aplikasi berbasis internet. Notifikasi ini muncul secara otomatis saat koneksi pengguna terputus. Menariknya, fitur serupa juga bisa diterapkan pada blog atau website.

Walaupun tidak ada nama khusus untuk widget ini, kita bisa menyebutnya Notifikasi Offline. Fungsinya sederhana namun penting: memberi tahu pengunjung bahwa mereka sedang tidak terhubung ke internet, sekaligus menampilkan tombol untuk memuat ulang halaman

Manfaat Notifikasi Offline di Blog

Dengan memasang widget ini, blog kamu akan terlihat lebih profesional dan interaktif. Menurut survei pengalaman pengguna, fitur-fitur kecil seperti ini dapat meningkatkan kepuasan dan kenyamanan pembaca.

Beberapa manfaat utamanya:

• Memberi notifikasi saat pengunjung kehilangan koneksi
• Menunjukkan bahwa blog kamu responsif dan teroptimasi
• Meningkatkan kesan profesional

Langkah Memasang Notifikasi Offline di Blog

Buka dashboard blogger > tema > edit html > lalu salin html dibawah ini dan letakan di atas kode </body>

<!-- Offline Notification by www.media903.com -->
<div id="noInternetCon" class="offlineNtfc hideNtfc">
  <div class="offlinePopUp">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><line x1="1" x2="23" y1="1" y2="23"/><path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55"/><path d="M5 12.55a10.94 10.94 0 0 1 5.17-2.39"/><path d="M10.71 5.05A16 16 0 0 1 22.58 9"/><path d="M1.42 9a15.91 15.91 0 0 1 4.7-2.88"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><line x1="12" x2="12.01" y1="20" y2="20"/></svg>
    <h2>Oops! No Internet!</h2>
    <p>Looks like you are facing a temporary network interruption.<br/>Or check your network connection.</p>
    <button class="offlineBtn" onclick="pageReload()"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg></button>
  </div>
</div>

Selanjutnya salin css dibawah ini dan letakan diatas kode ]]></b:skin> atau </style>

.offlineNtfc{position:fixed;display:flex;justify-content:center;align-items:center;top:0;right:0;bottom:0;left:0;background:#f2fafd;padding:20px;z-index:99999}
.offlineNtfc.hideNtfc{display:none}
.offlineNtfc .offlinePopUp{position:relative;display:flex;justify-content:center;align-items:center;max-width:400px;background:#fffeff;padding:30px;border-radius:30px;flex-direction:column}
.offlineNtfc .offlinePopUp svg{display:block;width:50px;height:50px;fill:none!important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}
.offlineNtfc .offlinePopUp h2{margin:10px 0 15px 0;color:#08102b;font-size:1.2rem;font-weight:800}
.offlineNtfc .offlinePopUp p{margin:0;color:#08102b;font-size:0.9rem;line-height:1.7em}
.offlineNtfc .offlinePopUp .offlineBtn{display:inline-flex;justify-content:center;align-items:center;width:50px;height:50px;margin-top:20px;background:#f3f5fe;border:none;border-radius:50%;outline:none;transition:all .2s ease;-webkit-transition:all .2s ease}
.offlineNtfc .offlinePopUp .offlineBtn:hover{transform:scale(1.05);-webkit-transform:scale(1.05)}
.offlineNtfc .offlinePopUp .offlineBtn svg{width:24px;height:24px;opacity:.8;flex-shrink:0}
.offlineNtfc .offlinePopUp .offlineBtn svg.r{animation:rotateIcn 1.5s infinite linear;-webkit-animation:rotateIcn 1.5s infinite linear}
@keyframes rotateIcn{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}
@-webkit-keyframes rotateIcn{from{-webkit-transform:rotate(0deg)} to{-webkit-transform:rotate(359deg)}}
/* Dark Mode */
.drK .offlineNtfc,.drK .offlineNtfc .offlinePopUp .offlineBtn{background:#1f1f1f}
.drK .offlineNtfc .offlinePopUp{background:#2c2d31}
.drK .offlineNtfc .offlinePopUp svg{stroke:#fefefe}
.drK .offlineNtfc .offlinePopUp p,.drK .offlineNtfc .offlinePopUp h2{color:#fefefe}

Terakhir salin javascript dibawah ini dan letakan diatas kode </body> dan simpan.

<script>
/*<![CDATA[*/function pageReload(){var n=document.querySelector("#noInternetCon .offlinePopUp .offlineBtn svg");null!=n&&n.classList.add("r"),setTimeout(function(){window.location.reload()},500)};window.addEventListener("offline",function(){document.querySelector("#noInternetCon").classList.remove("hideNtfc")}),window.addEventListener("online",function(){document.querySelector("#noInternetCon").classList.add("hideNtfc")});/*]]>*/
</script>

Penutup

Itulah cara mudah memasang notifikasi offline di blog. Selain membuat blog kamu lebih profesional, fitur ini juga bisa meningkatkan kepercayaan pengunjung.

Jika kamu mengalami kendala saat pemasangan, jangan ragu untuk bertanya melalui kolom komentar. Jangan lupa untuk membaca artikel menarik lainnya seputar blogging hanya di sini!