Memasang Notifikasi Offline di Blog
Siapa yang tidak pernah mengalami momen frustrasi saat jaringan internet sedang ngambek? Nah, bagaimana jika kita bisa memberi tahu pengunjung blog kita bahwa jaringan internet mereka sedang offline? Dengan menggunakan "Offline Notification", kamu bisa melakukannya!
Mungkin kamu sudah sering melihat notifikasi ini saat menggunakan aplikasi seperti Grab atau Gojek ketika koneksi internet sedang bermasalah. Ternyata, fitur serupa juga bisa diterapkan di blogmu, lho. Meskipun tidak memiliki nama resmi, banyak orang sepakat untuk menyebutnya sebagai "Offline Notification".
Tak perlu ragu, fitur ini sangat bermanfaat. Selain memberitahu pengunjung bahwa jaringan internet mereka sedang offline, "Offline Notification" juga memberikan kesan perhatian ekstra dari blogmu terhadap pengalaman pengguna. Menarik, bukan?
Jadi, jika kamu ingin membuat pengalaman pengunjung blogmu semakin istimewa, cobalah untuk memasang "Offline Notification". Dengan begitu, pengunjungmu akan tetap merasa diingat dan dihargai, meskipun sedang dalam kesulitan dengan koneksi internet. Ayo, tingkatkan kualitas blogmu dengan sentuhan keren ini!
Cara Memasang Notifikasi Offline di Blog
Notifikasi Offline
Sedikit informasi, skrip yang digunakan untuk membuat widget adalah HTML, CSS, dan JavaScript.
1. Masuk ke BLOGGER
2. Pilih menu TEMA
3. Pilih ikon panah > EDIT HTML
4. Tempel kode berikut di atas kode </body>:
<!--[ Change data-text to .html, .css, .js or any language ]--> <div class='pre pu notranslate' data-text='.html'> <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre> </div>
5. Tempel kode berikut 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}
6. Tempel kode terakhir ini 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>
7. Simpan dan lihat hasilnya
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.
1. Masuk ke BLOGGER
2. Pilih menu TEMA
3. Pilih ikon panah > EDIT HTML
4. Tempel kode berikut di atas kode </body>:
<div class="toastNtfc" id="toastSec"/>
5. Tempel kode berikut 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)}
6. Langkah terakhir tempel kode berikut 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>
7. Simpan dan lihat hasilnya
Penutup
Pemberitahuan tanpa koneksi internet menjadi opsi menarik yang dapat diberikan kepada pengguna. Selain memiliki desain menarik, kode yang digunakan juga ringan sehingga halaman tetap dapat dimuat dengan cepat.
Kode ini disesuaikan langsung dari platform Codepelajar dengan sedikit penyesuaian pada desainnya. Selain itu, kode juga diminyaki untuk mengurangi beban saat memuat halaman.
Gabung dalam percakapan