{"id":14981,"date":"2018-03-16T02:47:09","date_gmt":"2018-03-15T19:47:09","guid":{"rendered":"https:\/\/www.pugam.com\/?p=14981"},"modified":"2018-03-27T15:03:16","modified_gmt":"2018-03-27T08:03:16","slug":"tampilkan-peringatan-saat-javascript-tidak-aktif-di-browser","status":"publish","type":"post","link":"https:\/\/www.pugam.com\/14981\/tampilkan-peringatan-saat-javascript-tidak-aktif-di-browser\/","title":{"rendered":"Tampilkan Peringatan Saat JavaScript Tidak Aktif di Browser"},"content":{"rendered":"
<\/p>\n
Seperti yang kita ketahui, setiap browser<\/em> internet saat ini dilengkapi dengan kemampun untuk mengaktifkan atau menonaktifkan JavaScript, bisa juga kita sebut dengan istilah menolak atau mengizinkan JavaScript.<\/p>\n [pg_posts id=”14973″ posts_per_page=”1″]<\/p>\n Tutorial kali ini tidak hanya berlaku untuk kondisi semacam itu, yaitu ketika pengunjung dengan sengaja menonaktifkan JavaScript di\u00a0browser<\/em> mereka, tapi juga berlaku ketika browser<\/em> yang digunakan memang tidak mendukung JavaScript atau jenis script tertentu.<\/p>\n Mungkin bagi website yang tidak banyak menyertakan fungsi JavaScript tidak akan mengalami banyak masalah. Tapi hampir semua website yang ada saat ini menggunakan JavaScript, termasuk webiste yang dibangun menggunakan CMS seperti WordPress.<\/p>\n Jika JavaScript dalam hal ini mengambil peranan penting dan website Anda tidak dapat berjalan dengan baik tanpa JavaScript maka Anda dapat menampilkan peringatan kepada user<\/em> bahwa mereka perlu mengaktifkan JavaScript untuk dapat menggunakan website Anda.<\/p>\n Anda dapat memanfaatkan tag HTML Contohnya seperti ini:<\/p>\n Di sini ada dua kondisi:<\/p>\n Masalahnya adalah, tidak semua elemen yang ada di dalam web kita itu ‘dicetak’ dengan menggunakan kode JavaScript. Betul?<\/p>\n Jika Anda memiliki element di luar tag Tapi saya rasa tag Terutama bagi Anda pengguna WordPress, Anda tidak bisa menerapkan metode di atas jika tujuannya ingin menampilkan peringatan ketika JavaScript tidak aktif, karena sebagian besar konten Anda tetap akan tampil disamping peringatan yang Anda buat.<\/p>\n Untuk mengatasinya, kita tetap menggunakan tag Perhatikan gambar paling atas, jika ingin membuat yang semacam itu Anda dapat menggunakan contoh kode seperti ini:<\/p>\n Berikut contoh kode CSS nya:<\/p>\n Di sini yang paling utama adalah kita memberi properti Dengan begitu, elemen yang ada di dalam tag Dalam contoh gambar di atas, komponen di halaman web masih terlihat karena memang saya menggunakan background yang sedikit transparan.<\/p>\n Jika ingin semuanya tertutupi, tinggal ubah nilai dari properti background di bagian Silakan modifikasi kode di atas sesuai kebutuhan. Gunakan kolom komentar jika ada pertanyaan atau ada bagian yang masih kurang jelas.<\/p>\n Thanks.<\/p>\n","protected":false},"excerpt":{"rendered":"Seperti yang kita ketahui, setiap browser internet saat ini dilengkapi dengan kemampun untuk mengaktifkan atau menonaktifkan JavaScript, bisa juga kita \n ...<\/a>","protected":false},"author":3,"featured_media":14983,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","two_page_speed":[]},"categories":[2105],"yoast_head":"\nMengenal tag
<noscript><\/noscript><\/code><\/h2>\n
<noscript><\/noscript><\/code>\u00a0untuk menampilkan konten ketika kondisinya JavaScript di\u00a0browser<\/em> pengunjung tidak aktif. Lihat penjelasan lengkapnya di sini<\/a>.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n <body>\r\n <script>\r\n document.write(\"Hello World!\")\r\n <\/script>\r\n <noscript>\r\n <p>Maaf, website ini tidak dapat berjalan dengan baik tanpa JavaScript. Silakan aktifkan JavaScript terlebih dahulu.<\/p>\r\n <\/noscript>\r\n <\/body>\r\n<\/html><\/pre>\n
\n
<script><\/code> dan
<noscript><\/code> maka itu akan tetap ditampilkan tidak peduli JavaScript di\u00a0browser<\/em> pengunjung dalam keadaan aktif atau tidak.<\/p>\n
<noscript><\/code> sendiri tidak ditujukan untuk penggunaan semacam itu.<\/p>\n
<noscript><\/code> tetapi akan kita modifikasi sedemikian rupa menggunakan CSS dan beberapa tag HTML di dalamnya.<\/p>\n
Tampilkan Peringatan Ketika Pengunjung Menonaktifkan JavaScript di Browser Mereka<\/h2>\n
<!DOCTYPE html>\r\n<head>\r\n<\/head>\r\n <body>\r\n <noscript class=\"noscript\">\r\n <div id=\"javascript-notice\">\r\n <img src=\"URL image\" alt=\"JavaScript Disabled Notice\" title=\"JavaScript Disabled Notice\"\/>\r\n <p>Pelajari <a href=\"URL cara mengaktifkan JavaScript\" target=\"_blank\" >cara mengaktifkan JavaScript<\/a> di browser Anda.<p>\r\n <\/div>\r\n <\/noscript>\r\n Di sini pastinya banyak kode untuk menampilkan konten\/elemen di situs Anda dan dengan CSS kita bisa membuatnya tertutupi oleh elemen yang ada di tag noscript.\r\n <\/body>\r\n<\/html><\/pre>\n
.noscript {\r\n width: 100%;\r\n height: 100%;\r\n z-index: 100000;\r\n position: absolute;\r\n background: #020202cc;\r\n}\r\n\r\n.noscript #javascript-notice {\r\n background-color: #ffffff;\r\n display: block;\r\n position: fixed;\r\n text-align: center;\r\n box-shadow: 0 1px 1px rgba(0,0,0,.3);\r\n border-radius: 3px;\r\n padding: 5px;\r\n width: 500px;\r\n height: 370px;\r\n top: 50%;\r\n left: 50%;\r\n margin-top: -185px;\r\n margin-left: -250px;\r\n}\r\n\r\n.noscript #javascript-notice p {\r\n margin-top: 10px;\r\n}<\/pre>\n
position:absolute;<\/code> pada tag
<noscript><\/code> dan juga
z-index:100000;<\/code> yang diharapkan lebih tinggi dari z-index semua elemen yang ada di halaman web Anda.<\/p>\n
<noscript><\/code> ini akan menutupi elemen utama di web Anda. Jangan lupa dengan properti
width<\/code> dan
height<\/code> agar diatur maksimal juga, yaitu 100%.<\/p>\n
.noscript<\/code>, misal dengan warna putih, maka
background-color: #ffffff;<\/code> atau warna hitam
background-color: #000000;<\/code> .<\/p>\n