Pada kesempatan kali ini saya akan membahas mengenai bagaimana caranya membuat Notifikasi popup Hidupkan javascript ketika Mode JavaScript di nonaktifkan, dan mengapa harus memakai notifikasi dan sebenarya untuk apa?
Mode dan fungsi Javascript
Apakah kamu mengetahui 🤷 bahwa setiap browser memiliki fungsi tersendiri untuk mengelola kode Javascript didalam browser itu sendiri? Karena seperti yang kita Ketahui setiap website atau situs blog pasti memiliki unsur JavaScript didalmnya, dengan kode Javascript siapapun bisa membuat beraneka kreasi atau keajaiban dengan nya, hampir setiap elemen didalam website pasti menggunakan kode JavaScript
Itulah mengapa didalam setiap browser mendukung pengaturan JavaScript untuk digunakan, sebagai contoh untuk melihat tampilan atau pengaturan JavaScript pada browser Crome pada perangkat mobile
kamu bisa pergi ke pengaturan Crome
Kemudian kamu akan melihat seperti contoh gambar dibawah ini
Klik tanda panah seperti pada gambar diatas
Kemudian kamu bisa mengatur pengaturan JavaScript yldengan mengaktifkan atau menonaktifkan nya
Apa tujuan menonaktifkan Javascript
Apabila kamu menonaktifkan Javascript didalam pengaturan browser, maka ketika kamu memasuki sebuah website yang memiliki elemen javascript didalam nya, maka website tersebut hanya menampilkan setiap unsur yang tidak mengandung javascript
Tetapi hampir 100% setiap Website didukung dengan Javascript untuk menciptakan sebuah elemen
Lantas untuk apa menonaktifkan Javascript 🤔? Ya sebenernya saya juga tidak mengetahui secara pasti, tetapi cara tersebut mungkin menjadi sebuah trik untuk mengetahui Setiap elemen didalam Sebuah Website, jika didalam website tersebut memiliki fungsi yang sangat rahasia atau tersembunyi
Fungsi popup Javascript
Nah dengan kamu menerapkan popup notifikasi untuk menghidupkan javascript apabila pengguna menonaktifkan JavaScript maka pengguna akan melihat tampilan notifikasi mengambang yang berisi sebuah pesan
Dan didalam script kode yang akan saya bagikan sebentar lagi kamu bisa mengatur untuk menyembunyikan setiap elemen didalam fungsi tag pada setiap kode didalam website kamu tersebut
Tampilan popup Hidupkan Javascript
Nah dibawah ini adalah tampilan notifikasi mengambang hidupkan javascript ketika anda berhasil menerapkannya pada template kamu
Oh iya kamu juga bisa mengedit Tampilannya seperti text atau warna menurut keinginan kamu ya 👌
Cara Penerapan
Nah sekarang saya akan memberikan cara penerapan atau kode nya kepada anda
1. Salin kode dibawah ini kemudian letakkan kodenya diatas kode </head> atau sebelum kode </head>
<noscript><style>
#content-wrapper, #footer-wrapper {display:none}
body,html {overflow:hidden}
/* Noscript Popup by Desain Limited*/
#DLnoscript {background:rgba(0,0,0,0.85);padding:0;position:fixed;bottom:0;left:0;top:-100px;right:0;z-index:1000;opacity:1;visibility:visible;height:auto;}
#DLnoscript svg {width:100px; height:100px}
#DLnoscript svg path {fill:#fff}
#DLnoscript .DLisiNoscript{background:#e8ad11;color:#fff;position:absolute;text-align:center;padding:0 30px 30px 30px;margin:auto;top:30%;left:0;right:0;font-size:1.5rem;font-weight:400;line-height:1.5em;font-family:monospace;max-width:670px;box-shadow:0 20px 10px -10px rgba(0,0,0,0.15);border:15px solid rgba(0,0,0,.07); overflow:hidden; transition:all .6s cubic-bezier(.25,.8,.25,1); -webkit-transform:translateZ(0); transform:translateZ(0); backface-visibility:visible; transition:all .2s ease-in-out,visibility 0s; transform-origin:bottom center; pointer-events:auto; transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); opacity:1; animation:DLWobble .5s; -moz-animation: DLWobble .5s; -webkit-animation:DLWobble .5s; -o-animation:DLWobble .5s}
#DLnoscript .DLisiNoscript:hover{box-shadow:0 20px 10px -10px rgba(0,0,0,0.2);}
#DLnoscript .DLisiNoscript h4, #DLnoscript .DLisiNoscript .DLtittle{display:inline-block;background:rgba(0,0,0,.07);padding:5px 25px 15px 25px;font-size:2.2rem;font-weight:600;margin-bottom:20px}
</style></noscript>lihat pada kode ini yaitu #conten-wrapper, #footer-wrapper {display:none}, yang memiliki fungsi untuk menyembunyikan Setiap elemen atau Tag yang ingin kamu sembunyikan, nah kamu bisa menambah kode atau Tag didalmnya dengan menggunakan koma (,) setelah kode Tag kamu masukkan
2. Langkah selanjutnya kamu cari kode </body> dan letakkan kode dibawah ini tepat diatas nya
<noscript>
<div id='DLnoscript'>
<div class='DLisiNoscript'><span class='DLtittle'>Aktifkan Javascript</span><br/><svg viewBox='0 0 24 24'><path d='M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z'/></svg><br/>Untuk mengakses Situs web Desain Limited, Tolong hidupkan Javascript di dalam pengaturan browser anda.</div>
</div>
</noscript>Kamu bisa mengedit Text yang ingin kamu tampilkan sebagi notifikasi Popupnya 😉
Dan kamu bisa meletakkan setiap elemen hingga tak terbatas, nah kamu bisa melihat contoh tampilan jika kamu telah berhasil meletakkan kode yang saya berikan diatas dengan mencoba menonaktifkan JavaScript pada pengaturan browser kemudian periksa reload situs blog anda