Download Template Plus UI + mode Translate v3

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

Mencari koneksi internet...

Cek ulang koneksi internet dan ketersediaan paket data Anda, ya.