Cara Memasang Notifikasi Offline di Blog - Techo
Skip to content Skip to sidebar Skip to footer
Home / blog

Cara Memasang Notifikasi Offline di Blog

Cara Memasang Notifikasi Offline di Blog

Membahas masalah widget memang tidak akan ada habisnya. Kali ini, saya akan membahas tentang Cara Memasang Notifikasi Offline di Blog. Tidak ada nama khusus dari widget ini, tapi kita sepakat saja namanya adalah notifikasi offline atau Offline Notification.

Jika kamu menggunakan Grab atau Gojek, mungkin kamu sering melihat notifikasi ini saat jaringan internet sedang tidak aktif. Ternyata fitur tersebut juga bisa digunakan di blog. Fungsinya sudah jelas, memberitahukan pengunjung bahwa jaringan internetnya sedang offline.

Selain Grab dan Gojek, YouTube juga menampilkan notifikasi offline, kurang lebih tampilannya seperti berikut:

Notifikasi Offline YouTube

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

Notifikasi Offline

Sedikit informasi, skrip yang digunakan untuk membuat widget adalah HTML, CSS, dan JavaScript.

  • Masuk ke BLOGGER
  • Pilih menu TEMA
  • Pilih ikon panah > EDIT HTML
  • Tempel di atas kode </body>:
    • <!-- Offline Notification by www.imaginationman.eu.org -->
<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>
  • Tempel di atas kode </style> atau ]]></b:skin>:
    • .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}
  • Tempel di atas kode </body>:
    • <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>
  • Selesai.
Demo

Notifikasi Offline / Toast

Selain itu, saya juga telah menyediakan notifikasi offline dengan tampilan toast. Untuk fungsi tetap sama namun dengan tampilan yang berbeda / lebih sederhana.

  • Masuk ke BLOGGER
  • Pilih menu TEMA
  • Pilih ikon panah > EDIT HTML
  • Tempel di atas kode </body>:
    • <!-- Offline Toast Notification by www.imaginationman.eu.org -->
<div class="toastNtfc" id="toastSec"/>
  • Tempel di atas kode </style> atau ]]></b:skin>:
    • .toastNtfc span{position:fixed;display:inline-flex;justify-content:center;align-items:center;bottom:20px;left:24px;margin-bottom:20px;padding:13px 24px;background:#323232;color:rgba(255,255,255,.8);font-family:inherit;font-size:14px;text-align:center;border-radius:3px;box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:slideinwards 2s ease forwards;-webkit-animation:slideinwards 2s ease forwards;z-index:99999}
@media screen and (max-width:500px){.toastNtfc span{right:20px;left:20px;margin-bottom:20px;font-size:13px}}
@keyframes slideinwards{0%{opacity:0}20%{bottom:0;opacity:1}50%{bottom:0;opacity:1}80%{bottom:0;opacity:1}100%{bottom:-70px;opacity:0;visibility:hidden}}
@-webkit-keyframes slideinwards{0%{opacity:0}20%{bottom:0;opacity:1}50%{bottom:0;opacity:1}80%{bottom:0;opacity:1}100%{bottom:-70px;opacity:0;visibility:hidden}}
/* Dark Mode */
.drK .toastNtfc span{box-shadow:0 10px 40px rgba(0,0,0,.2)}
  • Tempel di atas kode </body>:
    • <script>
/*<![CDATA[*/window.addEventListener("offline",function(){document.querySelector("#toastSec").innerHTML="<span>No internet connection!</span>"}),window.addEventListener("online",function(){document.querySelector("#toastSec").innerHTML="<span>Internet connection restored!</span>"});/*]]>*/
</script>
  • Selesai.
Demo

Penutup

Notifikasi offline jelas menjadi pilihan menarik yang bisa diberikan kepada pembaca. Selain tampilan yang keren dan menarik, kode yang digunakan juga tidak terlalu banyak sehingga kecepatan halaman tetap maksimal.

Skrip ini diadaptasi langsung dari Fineshop Design dengan sedikit modifikasi pada tampilannya. Selain itu, skrip juga telah di-minify agar tidak terlalu memberatkan loading halaman.

Rekomendasi:

Cukup sekian artikel tentang Cara Memasang Notifikasi Offline di Blog ini, Terima kasih.

Referensi:
www.fineshopdesign.com / https://tinyurl.com/mvsmp92w