For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Membuat notifikasi popup no internet seperti aplikasi linkaja

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

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.