Hello sobat ICloudzer kali ini admin akan menjabarkan mengenai bagaimana caranya membuat notifikasi popup tidak ada internet yang mirip aplikasi linkaja dengan tampilan yang lebih keren pastinya
Info: Jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas secara bersama sama
Notifikasi popup
Notifikasi popup merupakan sebuah tampilan yang muncul pada layar website dengan memenuhi sebagian tampilan halaman website tersebut, atau pengertian lainnya dari notifikasi popup tersebut adalah notifikasi yang muncul dengan mode mengambang
No internet
Sedangkan notifikasi popup yang di maksud pada pembahasan artikel kali ini adalah notifikasi popup untuk menampilkan no internet koneksi pada website, alias warning saat data internet nonaktif alias tidak ada kuota saat menjelajah halaman website cara kerja dari notifikasi popup tidak ada internet akan muncul saat pengunjung web menonaktifkan paket datanya secara sengaja ataupun tidak sengaja, dan jika data kembali aktif maka notifikasi no internet akan menghilang alias hidden dalam bahas perkodeannya
Mirip aplikasi linkaja
Bagi kamu pengguna aplikasi linkaja pasti pernah melihat contoh notifkasi popup no internet saat menggunakan aplikasi tersebut, nah hal tersebut lah yang menginspirasi admin untuk membuat tampilan yang serupa seperti tampilan notifikasi popup no internet pada aplikasi linkaja tersebut
Contoh Tampilan
Jika kamu penasaran dengan contoh tampilan popup no internet di blogger silahkan non aktifkan paket data anda kemudian, lihat contoh tampilan no internet yang muncul, kemudian hidupkan kembali data internet anda, notifikasi popup no internet akan menghilang secara otomatis
Cara pembuatan
Baiklah sobat sekarang saatnya admin membahas bagaiamana sih caranya membuat no internet connection di blogger, silahkan pelajari dan ikuti setiap arahan yang bakalan admin jelaskan di bawah ini yak
Kode CSS
Silahkan salin kode CSS di bawah ini kemudian letakkan di atas kode ]]></b:skin>
/* No internet popup by Coderah.my.id */
.noInTer div{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:0;margin:0;z-index:99981;line-height:1.5em;background:#de3535;border:2px solid #de3535;color:rgba(255,255,255,.8);font-size:14px;font-family:inherit;border-radius:5px;padding:14px; box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:rahsldwrds 5s ease forwards;-webkit-animation:rahsldwrds 5s ease forwards}.noInTer .hidden,#rahInternet{display:none}
@media screen and (max-width:530px){
.noInTer div{margin-bottom:0;left:5px;right:5px;font-size:13px}}@keyframes rahsldwrds{0%{opacity:0}20%{opacity:1;bottom:10px}50%{opacity:1;bottom:10px}80%{opacity:1;bottom:10px}100%{opacity:0;bottom:-70px;visibility:hidden}}@-webkit-keyframes rahsldwrds{0%{opacity:0}20%{opacity:1;bottom:10px}50%{opacity:1;bottom:10px}80%{opacity:1;bottom:10px}100%{opacity:0;bottom:-70px;visibility:hidden}}
.drK .noInTer div{box-shadow:0 10px 40px rgba(0,0,0,.2)}Info: Atau gunakan tag kode <style> untuk meletakkan kode CSS di atas
Kode HTML
Langkah selanjutnya silahkan cari kode <body> kemudian letakkan kode HTML di bawah ini tepat di bawah nya
<div id='noInTer' class='noInTer hidden'>
<div>Maaf sedang terjadi gangguan, Mohon coba kembali dalam beberapa saat ya!</div>
</div>Info: Jangan mengedit kode apapun sebab kode HTML di atas sudah sesuai dengan kode javascript
Kode Javascript
Dan terakhir silahkan cari kode </body> kemudian letakkan kode javascript di bawah ini tepat di atasnya, jika sudah simpan template dan lihat bagaimana hasilnya
<script>/*<![CDATA[*/
/* No Internet Connection by Coderah */
var _0x2eba=["\x23\x6E\x6F\x49\x6E\x54\x65\x72","\x71\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72","\x6F\x66\x66\x6C\x69\x6E\x65","\x68\x69\x64\x64\x65\x6E","\x72\x65\x6D\x6F\x76\x65","\x63\x6C\x61\x73\x73\x4C\x69\x73\x74","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x6F\x6E\x6C\x69\x6E\x65","\x61\x64\x64"];(function(){var _0x58b6x1=document[_0x2eba[1]](_0x2eba[0]);window[_0x2eba[6]](_0x2eba[2],function(){if(_0x58b6x1!= null){_0x58b6x1[_0x2eba[5]][_0x2eba[4]](_0x2eba[3])}});window[_0x2eba[6]](_0x2eba[7],function(){if(_0x58b6x1!= null){_0x58b6x1[_0x2eba[5]][_0x2eba[8]](_0x2eba[3])}})})()
/*]]>*/</script>Info: Kode Javascript di atas sudah di enkripsi secara sederhana, so jangan mencoba untuk mengedit nya, jika ingin tampilannya berfungsi secara benar