Tutorial kali ini kita akan membuat widget notifikasi tanpa internet, ini sama seperti tampilan notifikasi cookie yang beberapa waktu lalu sempat kita bagikan.
Widget no internet coonection berfungsi untuk memberitahu pengunjung apabila koneksi internet yang digunakan mati jika pada saat mereka membaca artikel.
Jika kalian tertarik ingin menggunakannya bisa ikuti tutorial berikut ini.
Cara Menambahkan Widget Popup No Internet Connection
Langkah #1: Buka Blogger > Tema > Edit HTML
.
Langkah #2: Salin dan tempatkan kode CSS berikut tepat di atas ]]></b:skin>
atau </style>
template.
/* Pop-Up Box (Style 1) by Fineshop */
.popSc{position:fixed;z-index:99980;top:0;bottom:0;left:0;right:0;padding:20px;background:#f3f5fe;display:flex;justify-content:center;align-items:center}
.popSc.hidden{display:none}
.popSc .popBo{position:relative;background:#fff;max-width:400px;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:30px;border-radius:30px}
.popSc .popBo svg{display:block;width:50px;height:50px;fill:none !important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}
.popSc .popBo h2{margin:10px 0 15px 0;font-size:1.2rem;font-weight:800;color:#08102b}
.popSc .popBo p{margin:0;line-height:1.7em;font-size:0.9rem;color:#08102b}
.popSc .popBo .popBtn{display:inline-flex;justify-content:center;align-items:center;height:50px;width:50px;outline:none;border:none;background:#f3f5fe;border-radius:50%;margin-top:20px;transition:all .2s ease;-webkit-transition:all .2s ease}
.popSc .popBo .popBtn:hover{transform:scale(1.05);-webkit-transform:scale(1.05)}
.popSc .popBo .popBtn svg{width:24px;height:24px;flex-shrink:0;opacity:.8}
.popSc .popBo .popBtn svg.r{animation:rotateIcn 1.5s infinite linear;-webkit-animation:rotateIcn 1.5s infinite linear}
.darkMode .popSc, .darkMode .popSc .popBo .popBtn{background:#1f1f1f}
.darkMode .popSc .popBo{background:#2c2d31}
.darkMode .popSc .popBo svg{stroke:#fefefe}
.darkMode .popSc .popBo p, .darkMode .popSc .popBo h2{color:#fefefe}
@keyframes rotateIcn{from{transform:rotate(0deg)} to{transform:rotate(359deg)}}
@-webkit-keyframes rotateIcn{from{-webkit-transform:rotate(0deg)} to{-webkit-transform:rotate(359deg)}}
/* Toast Notification by Fineshop */
.tNtf span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px;z-index:99981;background:#323232;color:rgba(255,255,255,.8);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px; 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}
@media screen and (max-width:500px){.tNtf span{margin-bottom:20px;left:20px;right:20px;font-size:13px}}
@keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
@-webkit-keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
.darkMode .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}
Alternatif lain kalian bisa gunakan CSS dengan efek background blur di bawa ini.
/* Pop-Up Box (Style 2) by Fineshop */
.popSc{position:fixed;top:0;bottom:0;left:0;right:0;padding:20px;background:rgba(255, 255, 255, 0.1);z-index:99980;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center}
.popSc.hidden{display:none}
.popSc .popBo{position:relative;background:rgba(255, 255, 255, 0.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:400px;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:30px;border-radius:20px;box-shadow:0 5px 25px rgb(0 0 0 / 20%)}
.popSc .popBo svg{display:block;width:50px;height:50px;fill:none !important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}
.popSc .popBo h2{margin:10px 0 15px 0;font-size:1.2rem;font-weight:800;color:#08102b}
.popSc .popBo p{margin:0;line-height:1.7em;font-size:0.9rem;color:#08102b}
.popSc .popBo .popBtn{display:inline-flex;justify-content:center;align-items:center;height:50px;width:50px;outline:none;border:none;background:#482dff;border-radius:50%;margin-top:20px;transition:all .2s ease;-webkit-transition:all .2s ease}
.popSc .popBo .popBtn:hover{transform:scale(1.05);-webkit-transform:scale(1.05)}
.popSc .popBo .popBtn svg{width:24px;height:24px;stroke:#fff;flex-shrink:0}
.popSc .popBo .popBtn svg.r{animation:rotateIcn 1.5s infinite linear;-webkit-animation:rotateIcn 1.5s infinite linear}
.popSc{animation:popupBlur .3s ease-in; -webkit-animation:popupBlur .3s}
.popSc >*{animation:popupScale .3s ease-in; -webkit-animation:popupScale .3s}
.darkMode .popSc{background:rgba(0, 0, 0, 0.1)}
.darkMode .popSc .popBo{background:rgba(50, 50, 50, 0.8)}
.darkMode .popSc .popBo svg{stroke:#fefefe}
.darkMode .popSc .popBo p, .darkMode .popSc .popBo h2{color:#fefefe}
@keyframes popupBlur {from{opacity:0}to{opacity:1}}
@-webkit-keyframes popupBlur{from{opacity:0}to{opacity:1}}
@keyframes popupScale{from{transform:scale(0);animation-timing-function:ease-in;opacity:0}to{transform:scale(1);opacity:1}}
@-webkit-keyframes popupScale{from{-webkit-transform:scale(0);-webkit-animation-timing-function: ease-in;opacity:0}to{-webkit-transform:scale(1);opacity:1}}
@keyframes rotateIcn{from{transform:rotate(0deg)} to{transform:rotate(359deg)}}
@-webkit-keyframes rotateIcn{from{-webkit-transform:rotate(0deg)} to{-webkit-transform:rotate(359deg)}}
Langkah #3: Salin dan tempatkan kode HTML berikut tepat di bawah <body>
atau <body>
template.
<!--[ Toast Notification by Fineshop ]-->
<div class='tNtf' id='toastNotif'/>
Langkah #4: Lanjut tambahkan Javascript berikut tepat di bawah kode HTML sebelumnya pada langkah 3.
<script>/*<![CDATA[*/
/* No Internet Connection Script by Fineshop */
function pageReload() {
var n = document.querySelector("#noInternet .popBo .popBtn svg");
null != n && n.classList.add("r"), setTimeout(function() {
window.location.reload()
}, 500)
};
window.addEventListener("offline", function() {
document.querySelector("#noInternet").classList.remove("hidden"), document.querySelector("#toastNotif").innerHTML = "<span>No internet connection!</span>"
}), window.addEventListener("online", function() {
document.querySelector("#noInternet").classList.add("hidden"), document.querySelector("#toastNotif").innerHTML = "<span>Internet connection restored!</span>"
}); /*]]>*/</script>
Langkah #5: Berikutnya salin dan tempatkan kode HTML berikut tepat di atas </body>
atau </body>
template.
<!--[ No Internet Connection Pop-up by Fineshop ]-->
<div id='noInternet' class='popSc hidden'>
<div class='popBo'>
<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='popBtn' 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>
Langkah #6: Terakhir, Klik simpan template
Hanya Menambahkan No Internet Toast Notification
Jika kalian hanya ingin menampilkan Toast Notifikasi saja, kalian hanya perlu mengganti Javascript di atas dengan Javascript dibawah ini.
<script>/*<![CDATA[*/
/* No Internet Connection Script by Fineshop (Only Toast) */
window.addEventListener("offline", function() {
document.querySelector("#toastNotif").innerHTML = "<span>No internet connection!</span>"
}), window.addEventListener("online", function() {
document.querySelector("#toastNotif").innerHTML = "<span>Internet connection restored!</span>"
}); /*]]>*/</script>
Lalu hapus CSS Pop-Up Box yang sudah di pasang sebelumnya pada langkah #3 diatas.
Penutup
Nah itu tadi tutorial cara menambahkan widget notifikasi no internet connection di Blogger. Semoga artikel ini bisa bermanfaat. Kamu juga bisa share dan rekomendasikan ke teman-teman yang membutuhkan.
Seluruh kode di atas bersumber dari www.fineshopdesign.com
, jika kalian ingin melihat tutorial lainnya silakan kunjungi situs tersebut.