Memasang Notifikasi Offline di Blog

Hallo semua, pada halaman ini saya akan membagikan cara memasang notifikasi offline di blog. Jika kamu tertarik langsung aja yuk simak.

Pastinya kalian pernah mengalami putus koneksi saat membuka sebuah aplikasi yang berbasis online, Nah ketika sistem aplikasi tersebut mendeteksi bahwa kita tidak terhubung ke internet secara otomatis akan menampilkan halaman atau notifikasi yang memberitahu bahwa kamu sedang offline.

Namun tahukan kamu? Ternyata kamu juga bisa memasang widget tersebut diwebsite atau blog. Tidak ada nama khusus dari widget ini, tapi kita sepakat saja namanya adalah notifikasi offline atau Offline Notification.

Dengan widget ini, blog akan terasa semakin menarik dan profesional. Menurut survei yang telah dilakukan, pembaca cenderung menyukai halaman yang memiliki fitur-fitur menarik untuk meningkatkan pengalaman pengguna, salah satunya adalah notifikasi offline.

Cara 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>

Mungkin sekian pembahasan kali ini, jika ada yang ingin ditanyakan jangan ragu untuk menuliskannya pada kolom komentar. Baca jug artikel lainnya untuk mendapatkan informasi dan tips seputar blogging.