Cara membuat Notifikasi popup hidupkan javascript diblog


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





Baca Juga :
Ar-rahim 🇵🇸