Membuat notifikasi no internet mirip livin by mandiri
Hello sobat ICloudzer kali ini admin akan menjabarkan mengenai bagaimana caranya membuat notifikasi popup tidak ada internet yang mirip aplikasi livin mandiri 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 yang memenuhi sebagian tampilan halaman website tersebut, atau pengertian lainnya dari notifikasi popup tersebut adalah notifikasi yang muncul dengan mode atau tampilan 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 livin
Bagi kamu pengguna aplikasi livin by mandiri 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 Livin by mandiri
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 Javascript
Silahkan salin kode javascript di bawah ini kemudian letakkan di atas kode </head>
<script>/*<![CDATA[*/ eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('10 I=["\\q\\a\\G\\o\\8","\\t\\b\\8\\d\\a\\8\\11\\o\\8\\y\\8\\9\\a","\\a\\G\\m\\8","\\a\\8\\k\\a\\V\\t\\q\\q","\\a\\8\\k\\a\\W\\f\\9\\a\\8\\9\\a","\\u\\b\\d\\j\\w\\9\\p\\x\\l\\r\\a\\C\\r\\d\\t\\H\\s\\b\\f\\z\\9\\i\\e\\J\\v\\h\\p\\x\\h\\h\\g\\i\\c\\q\\m\\o\\d\\G\\e\\c\\9\\o\\c\\9\\8\\l\\v\\o\\8\\k\\g\\d\\o\\c\\s\\9\\l\\c\\a\\8\\y\\q\\e\\t\\8\\9\\a\\8\\b\\g\\P\\z\\q\\a\\c\\v\\G\\l\\t\\f\\9\\a\\8\\9\\a\\e\\t\\8\\9\\a\\8\\b\\g\\a\\8\\k\\a\\l\\d\\o\\c\\s\\9\\e\\t\\8\\9\\a\\8\\b\\g\\y\\d\\b\\s\\c\\9\\e\\A\\h\\m\\k\\n\\h\\g\\m\\d\\i\\i\\c\\9\\s\\e\\A\\B\\m\\k\\n\\A\\p\\m\\k\\g\\o\\c\\9\\8\\l\\j\\8\\c\\s\\j\\a\\e\\B\\h\\m\\k\\g\\n\\t\\f\\o\\f\\b\\e\\J\\v\\v\\v\\i\\v\\t\\g\\v\\f\\9\\a\\l\\q\\c\\Q\\8\\e\\A\\X\\m\\k\\g\\D\\c\\i\\a\\j\\e\\A\\h\\h\\K\\g\\r\\f\\b\\i\\8\\b\\l\\b\\d\\i\\c\\z\\q\\e\\B\\h\\m\\k\\g\\v\\f\\9\\a\\l\\D\\8\\c\\s\\j\\a\\e\\12\\h\\h\\E\\u\\b\\d\\j\\w\\9\\p\\x\\C\\i\\c\\q\\m\\o\\d\\G\\e\\v\\o\\8\\k\\g\\d\\o\\c\\s\\9\\l\\c\\a\\8\\y\\q\\e\\t\\8\\9\\a\\8\\b\\g\\m\\f\\q\\c\\a\\c\\f\\9\\e\\v\\c\\k\\8\\i\\g\\o\\8\\v\\a\\e\\h\\g\\b\\c\\s\\j\\a\\e\\h\\g\\a\\f\\m\\e\\h\\g\\r\\f\\a\\a\\f\\y\\e\\h\\g\\y\\d\\b\\s\\c\\9\\l\\r\\f\\a\\a\\f\\y\\e\\l\\A\\h\\h\\K\\g\\r\\d\\t\\H\\s\\b\\f\\z\\9\\i\\e\\b\\s\\r\\d\\M\\h\\F\\h\\F\\h\\F\\u\\B\\N\\g\\Q\\l\\c\\9\\i\\8\\k\\e\\p\\B\\p\\g\\D\\c\\i\\a\\j\\e\\A\\h\\h\\K\\g\\j\\8\\c\\s\\j\\a\\e\\A\\h\\h\\K\\g\\i\\c\\q\\m\\o\\d\\G\\e\\v\\o\\8\\k\\g\\P\\z\\q\\a\\c\\v\\G\\l\\t\\f\\9\\a\\8\\9\\a\\e\\t\\8\\9\\a\\8\\b\\g\\d\\o\\c\\s\\9\\l\\c\\a\\8\\y\\q\\e\\t\\8\\9\\a\\8\\b\\E\\u\\b\\d\\j\\w\\9\\p\\x\\u\\j\\c\\i\\i\\8\\9\\F\\J\\b\\d\\j\\w\\9\\a\\8\\b\\9\\8\\a\\C\\i\\c\\q\\m\\o\\d\\G\\e\\9\\f\\9\\8\\E\\u\\b\\d\\j\\w\\9\\p\\x\\l\\r\\f\\k\\e\\r\\8\\v\\f\\b\\8\\C\\t\\f\\9\\a\\8\\9\\a\\e\\T\\T\\g\\D\\c\\i\\a\\j\\e\\p\\h\\m\\k\\g\\j\\8\\c\\s\\j\\a\\e\\x\\m\\k\\g\\r\\d\\t\\H\\s\\b\\f\\z\\9\\i\\e\\J\\8\\r\\8\\t\\8\\i\\g\\r\\f\\b\\i\\8\\b\\l\\b\\d\\i\\c\\z\\q\\e\\B\\h\\m\\k\\g\\P\\z\\q\\a\\c\\v\\G\\l\\t\\f\\9\\a\\8\\9\\a\\e\\t\\8\\9\\a\\8\\b\\g\\d\\o\\c\\s\\9\\l\\c\\a\\8\\y\\q\\e\\t\\8\\9\\a\\8\\b\\g\\a\\8\\k\\a\\l\\d\\o\\c\\s\\9\\e\\t\\8\\9\\a\\8\\b\\g\\m\\f\\q\\c\\a\\c\\f\\9\\e\\d\\r\\q\\f\\o\\z\\a\\8\\g\\a\\f\\m\\e\\p\\m\\k\\g\\i\\c\\q\\m\\o\\d\\G\\e\\9\\f\\9\\8\\E\\u\\b\\d\\j\\w\\9\\p\\x\\l\\r\\f\\k\\e\\j\\f\\O\\8\\b\\e\\e\\d\\v\\a\\8\\b\\C\\t\\f\\9\\a\\8\\9\\a\\e\\T\\13\\o\\8\\d\\q\\8\\n\\8\\9\\d\\r\\o\\8\\n\\G\\f\\z\\b\\n\\c\\9\\a\\8\\b\\9\\8\\a\\n\\i\\d\\a\\d\\T\\g\\v\\f\\9\\a\\l\\D\\8\\c\\s\\j\\a\\e\\L\\h\\h\\g\\m\\f\\q\\c\\a\\c\\f\\9\\e\\d\\r\\q\\f\\o\\z\\a\\8\\g\\r\\f\\a\\a\\f\\y\\e\\A\\X\\m\\k\\g\\b\\c\\s\\j\\a\\e\\A\\h\\m\\k\\g\\o\\8\\v\\a\\e\\A\\h\\m\\k\\g\\v\\f\\9\\a\\l\\q\\c\\Q\\8\\e\\A\\B\\m\\k\\g\\t\\f\\o\\f\\b\\e\\b\\s\\r\\d\\M\\B\\p\\p\\F\\B\\p\\p\\F\\B\\p\\p\\F\\u\\L\\N\\g\\D\\c\\i\\a\\j\\e\\d\\z\\a\\f\\g\\a\\8\\k\\a\\l\\d\\o\\c\\s\\9\\e\\t\\8\\9\\a\\8\\b\\g\\d\\o\\c\\s\\9\\l\\c\\a\\8\\y\\q\\e\\t\\8\\9\\a\\8\\b\\g\\P\\z\\q\\a\\c\\v\\G\\l\\t\\f\\9\\a\\8\\9\\a\\e\\t\\8\\9\\a\\8\\b\\g\\m\\d\\i\\i\\c\\9\\s\\e\\A\\h\\m\\k\\g\\r\\d\\t\\H\\s\\b\\f\\z\\9\\i\\l\\t\\f\\o\\f\\b\\e\\J\\x\\B\\x\\B\\x\\B\\g\\r\\f\\b\\i\\8\\b\\l\\b\\d\\i\\c\\z\\q\\e\\p\\m\\k\\g\\E\\u\\b\\d\\j\\w\\9\\p\\x\\l\\r\\f\\k\\C\\D\\c\\i\\a\\j\\e\\A\\h\\h\\K\\g\\y\\d\\k\\l\\D\\c\\i\\a\\j\\e\\S\\L\\h\\m\\k\\g\\y\\d\\k\\l\\j\\8\\c\\s\\j\\a\\e\\t\\d\\o\\t\\M\\A\\h\\h\\K\\n\\l\\n\\S\\h\\m\\k\\N\\g\\m\\f\\q\\c\\a\\c\\f\\9\\e\\d\\r\\q\\f\\o\\z\\a\\8\\g\\r\\f\\b\\i\\8\\b\\l\\b\\d\\i\\c\\z\\q\\e\\h\\g\\d\\o\\c\\s\\9\\l\\c\\a\\8\\y\\q\\e\\t\\8\\9\\a\\8\\b\\g\\P\\z\\q\\a\\c\\v\\G\\l\\t\\f\\9\\a\\8\\9\\a\\e\\t\\8\\9\\a\\8\\b\\g\\a\\b\\d\\9\\q\\c\\a\\c\\f\\9\\e\\c\\9\\j\\8\\b\\c\\a\\g\\Q\\l\\c\\9\\i\\8\\k\\e\\p\\x\\p\\g\\i\\c\\q\\m\\o\\d\\G\\e\\v\\o\\8\\k\\g\\f\\O\\8\\b\\v\\o\\f\\D\\e\\j\\c\\i\\i\\8\\9\\g\\m\\f\\q\\c\\a\\c\\f\\9\\e\\b\\8\\o\\d\\a\\c\\O\\8\\g\\y\\d\\b\\s\\c\\9\\e\\h\\n\\d\\z\\a\\f\\g\\r\\f\\k\\l\\q\\j\\d\\i\\f\\D\\e\\h\\n\\p\\m\\k\\n\\x\\h\\m\\k\\n\\h\\n\\b\\s\\r\\d\\M\\h\\F\\h\\F\\h\\F\\u\\h\\p\\N\\E\\u\\b\\d\\j\\w\\9\\p\\x\\l\\r\\f\\k\\w\\9\\C\\m\\d\\i\\i\\c\\9\\s\\e\\A\\h\\m\\k\\n\\B\\h\\m\\k\\n\\B\\h\\m\\k\\g\\f\\O\\8\\b\\v\\o\\f\\D\\l\\G\\e\\q\\t\\b\\f\\o\\o\\g\\f\\O\\8\\b\\v\\o\\f\\D\\l\\k\\e\\j\\c\\i\\i\\8\\9\\g\\D\\c\\i\\a\\j\\e\\A\\h\\h\\K\\g\\r\\d\\t\\H\\s\\b\\f\\z\\9\\i\\e\\J\\v\\8\\v\\8\\v\\8\\E\\u\\b\\d\\j\\w\\9\\p\\x\\l\\r\\f\\k\\w\\9\\n\\c\\y\\s\\C\\i\\c\\q\\m\\o\\d\\G\\e\\r\\o\\f\\t\\H\\g\\D\\c\\i\\a\\j\\e\\A\\h\\h\\K\\g\\j\\8\\c\\s\\j\\a\\e\\d\\z\\a\\f\\g\\E\\u\\b\\d\\j\\w\\9\\p\\x\\n\\u\\b\\d\\j\\w\\9\\p\\x\\l\\r\\f\\k\\n\\u\\b\\d\\j\\w\\9\\p\\x\\l\\r\\f\\k\\w\\9\\n\\r\\C\\v\\f\\9\\a\\l\\q\\c\\Q\\8\\e\\A\\u\\p\\b\\8\\y\\g\\v\\f\\9\\a\\l\\D\\8\\c\\s\\j\\a\\e\\L\\h\\h\\E\\u\\b\\d\\j\\w\\9\\p\\x\\l\\r\\f\\k\\w\\9\\n\\q\\O\\s\\C\\y\\d\\b\\s\\c\\9\\e\\h\\n\\p\\m\\k\\g\\D\\c\\i\\a\\j\\e\\B\\p\\m\\k\\g\\j\\8\\c\\s\\j\\a\\e\\B\\p\\m\\k\\g\\O\\8\\b\\a\\c\\t\\d\\o\\l\\d\\o\\c\\s\\9\\e\\l\\B\\m\\k\\g\\E\\u\\b\\d\\j\\w\\9\\p\\x\\l\\r\\f\\k\\w\\9\\n\\m\\C\\o\\c\\9\\8\\l\\j\\8\\c\\s\\j\\a\\e\\A\\u\\p\\8\\y\\g\\v\\f\\9\\a\\l\\q\\c\\Q\\8\\e\\A\\b\\8\\y\\g\\t\\f\\o\\f\\b\\e\\J\\h\\L\\A\\h\\B\\r\\g\\y\\d\\b\\s\\c\\9\\l\\a\\f\\m\\e\\A\\h\\m\\k\\g\\y\\d\\b\\s\\c\\9\\l\\r\\f\\a\\a\\f\\y\\e\\A\\h\\m\\k\\E\\14\\y\\8\\i\\c\\d\\n\\q\\t\\b\\8\\8\\9\\n\\d\\9\\i\\n\\M\\y\\d\\k\\l\\D\\c\\i\\a\\j\\e\\L\\15\\S\\m\\k\\N\\C\\u\\b\\d\\j\\w\\9\\p\\x\\C\\a\\b\\d\\9\\q\\c\\a\\c\\f\\9\\e\\d\\o\\o\\n\\u\\A\\q\\n\\8\\d\\q\\8\\g\\d\\o\\c\\s\\9\\l\\c\\a\\8\\y\\q\\e\\v\\o\\8\\k\\l\\8\\9\\i\\E\\u\\b\\d\\j\\w\\9\\p\\x\\n\\u\\b\\d\\j\\w\\9\\p\\x\\l\\r\\f\\k\\C\\r\\f\\b\\i\\8\\b\\l\\b\\d\\i\\c\\z\\q\\e\\h\\g\\y\\d\\k\\l\\D\\c\\i\\a\\j\\e\\S\\L\\h\\m\\k\\g\\r\\f\\a\\a\\f\\y\\e\\h\\g\\m\\f\\q\\c\\a\\c\\f\\9\\e\\v\\c\\k\\8\\i\\E\\E\\V\\Y\\n\\16\\r\\d\\j\\n\\t\\o\\d\\q\\q\\n\\u\\i\\b\\R\\n\\P\\c\\H\\d\\n\\i\\c\\n\\m\\8\\b\\o\\z\\H\\d\\9\\n\\Y\\V\\u\\i\\b\\R\\n\\u\\b\\d\\j\\w\\9\\p\\x\\C\\r\\d\\t\\H\\s\\b\\f\\z\\9\\i\\e\\b\\s\\r\\d\\M\\h\\F\\n\\h\\F\\n\\h\\F\\n\\h\\u\\A\\N\\E\\u\\i\\b\\R\\n\\u\\b\\d\\j\\w\\9\\p\\x\\n\\u\\b\\d\\j\\w\\9\\p\\x\\l\\r\\f\\k\\C\\r\\d\\t\\H\\s\\b\\f\\z\\9\\i\\e\\b\\s\\r\\d\\M\\p\\h\\F\\n\\p\\h\\F\\n\\p\\h\\F\\n\\h\\u\\L\\N\\E\\u\\i\\b\\R\\n\\u\\b\\d\\j\\w\\9\\p\\x\\n\\u\\b\\d\\j\\w\\9\\p\\x\\l\\r\\f\\k\\w\\9\\C\\r\\d\\t\\H\\s\\b\\f\\z\\9\\i\\e\\J\\B\\p\\B\\p\\B\\S\\E\\u\\i\\b\\R\\n\\u\\b\\d\\j\\w\\9\\p\\x\\n\\u\\b\\d\\j\\w\\9\\p\\x\\l\\r\\f\\k\\n\\u\\b\\d\\j\\w\\9\\p\\x\\l\\r\\f\\k\\w\\9\\n\\m\\F\\n\\u\\i\\b\\R\\n\\u\\b\\d\\j\\w\\9\\p\\x\\n\\u\\b\\d\\j\\w\\9\\p\\x\\l\\r\\f\\k\\n\\u\\b\\d\\j\\w\\9\\p\\x\\l\\r\\f\\k\\w\\9\\n\\j\\B\\C\\t\\f\\o\\f\\b\\e\\J\\v\\8\\v\\8\\v\\8\\E","\\d\\m\\m\\8\\9\\i\\W\\j\\c\\o\\i","\\j\\8\\d\\i"];17 U=Z[I[1]](I[0]);U[I[2]]=I[3];U[I[4]]=I[5];Z[I[7]][I[6]](U)',62,70,'||||||||x65|x6E|x74|x72|x69|x61|x3A|x6F|x3B|x30|x64|x68|x78|x2D|x70|x20|x6C|x35|x73|x62|x67|x63|x2E|x66|x49|x33|x6D|x75|x31|x32|x7B|x77|x7D|x2C|x79|x6B|_0x2bce|x23|x25|x38|x28|x29|x76|x6A|x7A|x4B|x36|x27|rahJsNoin|x2F|x43|x34|x2A|document|var|x45|x37|x50|x40|x39|x55|const'.split('|'),0,{}))
/*]]>*/</script>
Info: Taruh di bawah kode <body> atau di atas kode </body> juga bisa tapi kecepatan blog akan terpengaruh dengan peletakkan script
Kode HTML
Langkah selanjutnya silahkan cari kode <body> kemudian letakkan kode HTML di bawah ini tepat di bawah nya
<div id='rahIn53' class='rahIn53 hidden'>
<div class='rahIn53-box'>
<div class='rahIn53-boxIn'>
<img alt='no internet by Icloudice.com' src='https://i.imgur.com/uCpyIiV.jpg'/>
<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2308102b' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'><g><path d='M16,31A15,15,0,1,1,31,16,15,15,0,0,1,16,31ZM16,3A13,13,0,1,0,29,16,13,13,0,0,0,16,3Z'/><rect height='9' width='2' x='15' y='14'/><path d='M16,12a2,2,0,1,1,2-2A2,2,0,0,1,16,12Zm0-2Z'/></g></svg>
<b>Mencari koneksi internet...</b>
<p>Cek ulang koneksi internet dan ketersediaan paket data Anda, ya.</p>
</div>
</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[*/ eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('m 9=["\\v\\e\\g\\n\\w\\c\\x\\y","\\z\\A\\b\\e\\B\\C\\b\\h\\b\\o\\i\\j\\e","\\j\\p\\p\\h\\f\\c\\b","\\n\\f\\d\\d\\b\\c","\\e\\b\\D\\j\\q\\b","\\o\\h\\g\\k\\k\\r\\f\\k\\i","\\g\\d\\d\\E\\q\\b\\c\\i\\r\\f\\k\\i\\b\\c\\b\\e","\\j\\c\\h\\f\\c\\b","\\g\\d\\d"];(l(){m a=F[9[1]](9[0]);s[9[6]](9[2],l(){t(a!=u){a[9[5]][9[4]](9[3])}});s[9[6]](9[7],l(){t(a!=u){a[9[5]][9[8]](9[3])}})})()',42,42,'|||||||||_0x9dd4||x65|x6E|x64|x72|x69|x61|x6C|x74|x6F|x73|function|var|x68|x63|x66|x76|x4C|window|if|null|x23|x49|x35|x33|x71|x75|x79|x53|x6D|x45|document'.split('|'),0,{})) /*]]>*/</script>
Info: Kode Javascript di atas sudah di enkripsi secara sederhana, so jangan mencoba untuk mengedit nya, jika ingin tampilannya berfungsi secara benar
Cek ulang koneksi internet dan ketersediaan paket data Anda, ya.