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:
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>:
- Tempel di atas kode </style> atau ]]></b:skin>:
- Tempel di atas kode </body>:
- Selesai.
<!-- Offline Notification by www.ferisp.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>.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}<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>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>:
- Tempel di atas kode </style> atau ]]></b:skin>:
- Tempel di atas kode </body>:
- Selesai.
<!-- Offline Toast Notification by www.ferisp.com --> <div class="toastNtfc" id="toastSec"/>
.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)}<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>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.
Cukup sekian artikel tentang Cara Memasang Notifikasi Offline di Blog ini, Terima kasih.
Referensi:
www.fineshopdesign.com / https://tinyurl.com/mvsmp92w