Add Offline Notification No internet

Hai sobat kali ini admin bloger posting pop-up jika internet tidak terhubung akan memberikan notifikasi seperti pada gambar dibawah. 

Gambar terkait

Penting!

sebelum anda ingin memulai merubah atau menambahkan code yang diposting ini sebaiknya cadangkan terlebih dahulu thema saat ini, jika terjadi adanya  error . dapat mencopy thema yang sudah di cadangkan tersbut.

Here is a step-by-step guide for adding No Internet Notification on your Blogger Theme:

Step 1: Login untuk Blogger Dashboard.

Step 2: Click untuk Theme pilihan dari Dasbor.

Step 3: Click pada ikon panah bawah di sebelah CUSTOMIZE button.

Step 4: Select Edit HTML. Ini akan mengarahkan Anda ke halaman pengeditan kode HTML.

Step 5: Find the code ]]></b:skin>. Tempelkan kode CSS yang disediakan tepat di atas kode ini.

Anda dapat menggunakan fungsi pencarian (Ctrl + F atau Command + F) untuk memudahkan mencari kode tempatnya.

Jika templat Anda menyertakan fitur mode gelap dan Anda ingin menyesuaikan warnanya saat diaktifkan, Anda dapat mengubah kode untuk memenuhi kebutuhan Anda.

.oppsup-Sc{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}
.oppsup-Sc.hidden{display:none}
.oppsup-Sc .oppsup-Bo{position:relative;background:#fff;max-width:400px;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:30px;border-radius:30px}
.oppsup-Sc .oppsup-Bo svg{display:block;width:50px;height:50px;fill:none !important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}
.oppsup-Sc .oppsup-Bo h2{margin:10px 0 15px 0;font-size:1.2rem;font-weight:800;color:#08102b}
.oppsup-Sc .oppsup-Bo p{margin:0;line-height:1.7em;font-size:0.9rem;color:#08102b}
.oppsup-Sc .oppsup-Bo .oppsup-Btn{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}
.oppsup-Sc .oppsup-Bo .oppsup-Btn:hover{transform:scale(1.05);-webkit-transform:scale(1.05)}
.oppsup-Sc .oppsup-Bo .oppsup-Btn svg{width:24px;height:24px;flex-shrink:0;opacity:.8}
.oppsup-Sc .oppsup-Bo .oppsup-Btn svg.r{animation:rotateIcn 1.5s infinite linear;-webkit-animation:rotateIcn 1.5s infinite linear}
.drK .oppsup-Sc, .drK .oppsup-Sc .oppsup-Bo .oppsup-Btn{background:#1f1f1f}
.drK .oppsup-Sc .oppsup-Bo{background:#2c2d31}
.drK .oppsup-Sc .oppsup-Bo svg{stroke:#fefefe}
.drK .oppsup-Sc .oppsup-Bo p, .drK .oppsup-Sc .oppsup-Bo  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)}}

Untuk mendapatkan tampilan alternatif dengan efek blur, tambahkan CSS berikut daripada menggunakan CSS yang disediakan di atas.

/* Pop-up Box (Style ) */

.oppsup-Sc{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}
.oppsup-Sc.hidden{display:none}
.oppsup-Sc .oppsup-Bo{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%)}
.oppsup-Sc .oppsup-Bo svg{display:block;width:50px;height:50px;fill:none !important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}
.oppsup-Sc .oppsup-Bo h2{margin:10px 0 15px 0;font-size:1.2rem;font-weight:800;color:#08102b}
.oppsup-Sc .oppsup-Bo p{margin:0;line-height:1.7em;font-size:0.9rem;color:#08102b}
.oppsup-Sc .oppsup-Bo .oppsup-Btn{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}
.oppsup-Sc .oppsup-Bo .oppsup-Btn:hover{transform:scale(1.05);-webkit-transform:scale(1.05)}
.oppsup-Sc .oppsup-Bo .oppsup-Btn svg{width:24px;height:24px;stroke:#fff;flex-shrink:0}
.oppsup-Sc .oppsup-Bo .oppsup-Btn svg.r{animation:rotateIcn 1.5s infinite linear;-webkit-animation:rotateIcn 1.5s infinite linear}
.oppsup-Sc{animation:oppsup-upBlur .3s ease-in; -webkit-animation:oppsup-upBlur .3s}
.oppsup-Sc >*{animation:oppsup-upScale .3s ease-in; -webkit-animation:oppsup-upScale .3s}
.drK .oppsup-Sc{background:rgba(0, 0, 0, 0.1)}
.drK .oppsup-Sc .oppsup-Bo{background:rgba(50, 50, 50, 0.8)}
.drK .oppsup-Sc .oppsup-Bo svg{stroke:#fefefe}
.drK .oppsup-Sc .oppsup-Bo p, .drK .oppsup-Sc .oppsup-Bo h2{color:#fefefe}
@keyframes oppsup-upBlur {from{opacity:0}to{opacity:1}}
@-webkit-keyframes oppsup-upBlur{from{opacity:0}to{opacity:1}}
@keyframes oppsup-upScale{from{transform:scale(0);animation-timing-function:ease-in;opacity:0}to{transform:scale(1);opacity:1}}
@-webkit-keyframes oppsup-upScale{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)}}

Step 6:Tambahkan di bawah ini CSS Codes tepat di bawah Kode CSS yang telah kami tambahkan Step 5.

/* Toast Notification  */
.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}}
.drK .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}

Anda dapat melewati langkah ini jika Anda sudah menambahkan kode 'Pemberitahuan Toast' sebelumnya.

Step 7: Paste the following HTML just below the <body> tag. If you are unable to find it, it's likely that it has already been parsed as <body> and search it, parsed code <body>.

<!--[ Toast Notification ]-->
<div id='toastNotif' class='tNtf'></div>

Abaikan langkah ini jika Anda sudah menambahkan elemen yang diperlukan.

Step 8: Add the following HTML code just above the </body> tag or </body> tag.

<!--[ No Internet Widget Pop-up ]-->
<div id='noInternet' class='oppsup-Sc hidden'>
  <div class='oppsup-Bo'>
    <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='oppsup-Btn' 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>

Step 9: Setelah itu, tambahkan yang disediakan JavaScript kode tepat di bawah HTML code yang kami tempelkan Step 7.

<script>/*<![CDATA[*/ /* No Internet Widget */ function pageReload(){var n=document.querySelector("#noInternet .oppsup-Bo .oppsup-Btn 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>

Step 10: Terakhir, klik save untuk menyimpan perubahan Anda