Hello sobat icloudZer kali ini admin bakalan memberikan informasi mengenai bagaimana caranya menampik pesan tidak ada internet saat offline di blogger
Info: Oke jika kamu penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
No Internet
Apa itu no internet, ya akhir akhir ini banyak di antara pengguna blogger yang menggunakan fitur no internet entah mereka membeli fitur tersebut atau mengambil nya dari tutorial tutorial yang diberikan oleh master blogger di dalam blognya ya gak taulah, yang jelas admin bakalan memberikan tutorial cara menampilkan pesan no internet di dalm blog
Fungsi No Internet
Fungsi dari fitur no internet di blogger adalah cara untuk mencegah pengunjung offline, jika pengunjung dengan sengaja ataupun tidak sengaja menonaktifkan internet nya saat menjelajah blog anda, maka pesan no internet tersebut akan muncul, negitulah fungsi ataupun cara kerja dari no internet di blogger
Tampil secara Otomatis
Nah jika kamu memasang dan menggunakan fitur no internet di dalam blogger, maka nantinya tampilan no internet akan tampil secara otomatis saat pengunjung menonaktifkan paket data nya alias internet nya, nah penggunaan dan pemasangan nya cukup meletakkan kode yang admin jabarkan sebentar lagi ini kedalam template blog mu oke
Contoh Tampilan
Jika kamu penasaran bagaimana contoh dari tampilan no internet di blogger, silahkan kamu nonaktifkan paket data anda dulu saat menjelajah blog icloudice, enter kamu akan di tampilkan pesan no internet yang sedang admin jabarkan dan admin jelaskan di sini
Cara pembuatan
Baiklah sekarang saatnya admin bakalan menjelaskan mengenai bagaimana caranya membuat pesan no internet di dalam blogger, harap bagi kamu untuk selalu menyimaknya secara benar dan perlahan oke
Kode CSS
Seperti biasanya langkah pertama yang bisa kamu lakukan adalah dengan menyalin kode CSS di bawah ini kemudian letakkan di atas kode ]]></b:skin>
/* No Internet by Rah Cyber --> */
.rah-tntf span{position:fixed;left:20px;right:20px;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}
.rahNoIn{position:fixed;top:0;bottom:0;left:0;right:0;padding:20px;background:rgba(255, 255, 255, 0.1);z-index:999999;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center}
.rahNoIn.hidden{display:none}
.rahNoIn .rahNoInIn{position:relative;background:#fafafc;-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%)}
.rahNoIn .rahNoInIn img{display:block;width:50px;height:50px;border-radius:50%}
.rahNoIn .rahNoInIn h2{margin:10px 0 15px 0;font-size:1.2rem;font-weight:800;color:#08102b}
.rahNoIn .rahNoInIn p{margin:0;line-height:1.7em;font-size:0.9rem;color:#08102b}
.rahNoIn .rahNoInIn img:hover{transform:scale(1.05);-webkit-transform:scale(1.05)}
.rahNoIn .rahNoInIn img.rah{animation:rahrotation 1.5s infinite linear;-webkit-animation:rahrotation 1.5s infinite linear}
.rahNoIn{animation:rahpop-b .3s ease-in; -webkit-animation:rahpop-b .3s}
.rahNoIn >*{animation:rahpop-sc .3s ease-in; -webkit-animation:rahpop-sc .3s}
.dark-mode .rahNoIn{background:rgba(0, 0, 0, 0.1)}
.dark-mode .rahNoIn .rahNoInIn{background:rgba(50, 50, 50, 0.8)}
.dark-mode .rahNoIn .rahNoInIn svg{stroke:#fefefe}
.dark-mode .rahNoIn .rahNoInIn p, .dark-mode .rahNoIn .rahNoInIn h2{color:#fefefe}
@keyframes rahpop-b {from{opacity:0}to{opacity:1}}
@-webkit-keyframes rahpop-b{from{opacity:0}to{opacity:1}}
@keyframes rahpop-sc{from{transform:scale(0);animation-timing-function:ease-in;opacity:0}to{transform:scale(1);opacity:1}}
@-webkit-keyframes rahpop-sc{from{-webkit-transform:scale(0);-webkit-animation-timing-function: ease-in;opacity:0}to{-webkit-transform:scale(1);opacity:1}}
@keyframes rahrotation{from{transform:rotate(0deg)} to{transform:rotate(359deg)}}
@-webkit-keyframes rahrotation{from{-webkit-transform:rotate(0deg)} to{-webkit-transform:rotate(358deg)}}Info: Atau kamu bisa meletakkan kode CSS tersebut menggunakan tag kode <style>
Kode HTML
Langkah selanjutnya yang bisa kamu lakukan adalah dengan menyalin lagi kode HTML di bawah ini, kemudian kamu bisa meletakkannya di bawah kode <body>
<!-- [ No Internet by Rah Cyber ] -->
<div class='rah-tntf' id='rahmsg-ntf'>
</div>
<div class="rahNoIn hidden" id="rahInternet-off">
<div class="rahNoInIn">
<img onclick='rahReload()' alt='Dibutuhkan Internet' src='https://1.bp.blogspot.com/-Cb3p2mf3qmE/YTUUvvtF-QI/AAAAAAAAKYw/AJsGwdbWuPUkngsg-FMNZDHL6JpHq1U3gCNcBGAsYHQ/s0/4_20210906_020205_0003.png'/>
<h2>
Oops! No Internet!
</h2>
<p>
Sepertinya anda menghadapi gangguan jaringan sementara, atau silahkan Hidupkan paket data Anda untuk bisa mengakses Icloudice.
</p>
<center class='rahlink' style='margin-top:20px'/>
</div>
</div>Info: Fungsi dari kode HTML di atas adalah untuk menampilkan fungsi no internet agar muncul dan berfungsi
Kode Javascript
Langkah terakhir yang bisa kamu lakukan untuk membuat tampilan no internet di blogger adalah dengan menyalin lagi kode javascript di bawah ini kemudian letakkan di atas kode </body>
<script>
/*<![CDATA[*/
// No internet by rah cyber
var _0x53d2=["\x23\x72\x61\x68\x49\x6E\x74\x65\x72\x6E\x65\x74\x2D\x6F\x66\x66\x20\x2E\x72\x61\x68\x4E\x6F\x49\x6E\x20\x2E\x72\x61\x68\x4E\x6F\x49\x6E\x49\x6E\x20\x69\x6D\x67","\x71\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72","\x72\x61\x68","\x61\x64\x64","\x63\x6C\x61\x73\x73\x4C\x69\x73\x74","\x72\x65\x6C\x6F\x61\x64","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x6F\x66\x66\x6C\x69\x6E\x65","\x68\x69\x64\x64\x65\x6E","\x72\x65\x6D\x6F\x76\x65","\x23\x72\x61\x68\x49\x6E\x74\x65\x72\x6E\x65\x74\x2D\x6F\x66\x66","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x23\x72\x61\x68\x6D\x73\x67\x2D\x6E\x74\x66","\x3C\x73\x70\x61\x6E\x3E\x6C\x6E\x74\x65\x72\x6E\x65\x74\x20\x74\x69\x64\x61\x6B\x20\x61\x64\x61\x21\x3C\x2F\x73\x70\x61\x6E\x3E","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x6F\x6E\x6C\x69\x6E\x65","\x3C\x73\x70\x61\x6E\x3E\x49\x6E\x74\x65\x72\x6E\x65\x74\x20\x4B\x65\x6D\x62\x61\x6C\x69\x20\x4F\x6E\x6C\x69\x6E\x65\x21\x3C\x2F\x73\x70\x61\x6E\x3E","\x43\x72\x65\x61\x74\x65\x64\x20\x62\x79\x20\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x73\x3A\x2F\x2F\x69\x63\x6C\x6F\x75\x64\x69\x63\x65\x2E\x63\x6F\x6D\x22\x3E\x49\x43\x6C\x6F\x75\x64\x69\x63\x65\x2E\x63\x6F\x6D\x3C\x2F\x61\x3E","\x68\x74\x6D\x6C","\x73\x74\x79\x6C\x65","\x7A\x2D\x69\x6E\x64\x65\x78\x3A\x35\x3B\x66\x6F\x6E\x74\x2D\x73\x69\x7A\x65\x3A\x31\x32\x70\x78\x3B\x63\x6F\x6C\x6F\x72\x3A\x20\x23\x31\x36\x31\x36\x31\x37","\x61\x74\x74\x72","\x2E\x72\x61\x68\x6C\x69\x6E\x6B","\x6C\x65\x6E\x67\x74\x68","\x2E\x72\x61\x68\x6C\x69\x6E\x6B\x3A\x76\x69\x73\x69\x62\x6C\x65","\x68\x72\x65\x66","\x68\x74\x74\x70\x73\x3A\x2F\x2F\x69\x63\x6C\x6F\x75\x64\x69\x63\x65\x2E\x63\x6F\x6D","\x72\x65\x61\x64\x79"];function rahReload(){var _0x2ad7x2=document[_0x53d2[1]](_0x53d2[0]);null!= _0x2ad7x2&& _0x2ad7x2[_0x53d2[4]][_0x53d2[3]](_0x53d2[2]),setTimeout((function(){window[_0x53d2[6]][_0x53d2[5]]()}),1e3)}window[_0x53d2[14]](_0x53d2[7],(function(){document[_0x53d2[1]](_0x53d2[10])[_0x53d2[4]][_0x53d2[9]](_0x53d2[8]),document[_0x53d2[1]](_0x53d2[12])[_0x53d2[11]]= _0x53d2[13]})),window[_0x53d2[14]](_0x53d2[15],(function(){document[_0x53d2[1]](_0x53d2[10])[_0x53d2[4]][_0x53d2[3]](_0x53d2[8]),document[_0x53d2[1]](_0x53d2[12])[_0x53d2[11]]= _0x53d2[16]}));$(document)[_0x53d2[27]](function(){$(_0x53d2[22])[_0x53d2[21]](_0x53d2[19],_0x53d2[20])[_0x53d2[18]](_0x53d2[17]);setInterval(function(){if(!$(_0x53d2[24])[_0x53d2[23]]){window[_0x53d2[6]][_0x53d2[25]]= _0x53d2[26]}},3000)})/*]]>*/
</script>Info: Fungsi dari kode Javascript di atas adalah untuk menjalankan fungsi no internet agar bisa berfungsi