Cara Membuat Anti Noscript dan Sembunyikan Konten Blog Jika Javascript Dimatikan

Tutorial sembunyikan dan hapus semua konten blog ketika Javascript di browser tidak aktif / disable / nonaktif dan memasang notifikasi popup anti noscript.
Cara Menyembunyikan Konten Blog Jika Javascript di Browser Dimatikan dan Tidak Aktif

Javascript menjadi elemen krusial dalam sebuah blog. Dengannya, kamu bisa menciptakan banyak efek "sihir" yang membuat tampilan halaman menjadi lebih menarik dan mempercepat waktu loading blog. Rasanya hampir tidak mungkin ada website yang tidak menggunakan Javascript di zaman sekarang ini, dimana teknologi pengembangan website sudah maju sangat pesat.

Maka akan muncul masalah besar jika Javascript di dalam browser dinonaktifkan. Tampilan dan kecepatan blog akan menjadi jelek karena semua script pembantunya tidak berjalan.

Loh memangnya Javascript bisa dimatikan?

Iya bisa dong. Setiap browser ada pengaturan untuk enable (aktif) dan disable (nonaktif). Kamu bisa baca cara mematikan Javascript di wikiHow.

Tujuan dimatikannya Javascript apa sih?
Saya juga nggak ngerti kenapa ada yang mau mematikan Javascript. Mungkin untuk menghemat data, jadi yang tampil hanya tulisannya saja. Dimaklum, karena tujuan pengunjung membuka website itu untuk membaca tulisan, bukan? Bisa juga karena pengunjung memblokir website tertentu dan dia tidak ingin melihat tampilan website tersebut.

Cara Menyembunyikan Konten Blog Ketika Javascript di Browser Tidak Aktif

Kamu bisa membuat trik untuk menyembunyikan seluruh konten blog jika Javascript tidak aktif. Nantinya akan muncul sebuah notifikasi popup yang meminta pengunjung untuk menghidupkannya kembali.

Simpan kode ini "SEBELUM / DI ATAS" </head>.
<noscript><style>
#content-wrapper, #footer-wrapper {display:none}
  body,html {overflow:hidden}
  /* Noscript Popup by igniel.com */
  #ignielNoscript {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;}
  #ignielNoscript svg {width:100px; height:100px}
  #ignielNoscript svg path {fill:#fff}
  #ignielNoscript .isiNoscript{background:#008c5f;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:ignielWobble .5s; -moz-animation: ignielWobble .5s; -webkit-animation:ignielWobble .5s; -o-animation:ignielWobble .5s}
  #ignielNoscript .isiNoscript:hover{box-shadow:0 20px 10px -10px rgba(0,0,0,0.2);}
  #ignielNoscript .isiNoscript h4, #ignielNoscript .isiNoscript .judul{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>

#content-wrapper dan #footer-wrapper adalah nama ID dari elemen HTML yang ingin disembunyikan. Nama ID tiap template bisa saja berbeda. Jadi cek template masing-masing ya.

Kalau mau menyembunyikan lebih dari satu elemen, pisahkan menggunakan tanda koma (,) seperti contoh diatas: #content-wrapper, #footer-wrapper.

Lanjut ya. Tambahkan kode ini "SESUDAH / DI BAWAH" <body>
<noscript>
  <div id='ignielNoscript'>
    <div class='isiNoscript'><span class='judul'>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 blog Igniel, hidupkan Javascript di dalam pengaturan browser.</div>
  </div>
</noscript>

Jangan lupa simpan pengaturan template dengan klik tombol Save theme.

Untuk mengecek hasilnya, coba disable Javascript di browser dengan mengikuti tutorial di link yang sudah disebutkan diatas. Kalau sukses, tampilannya akan seperti ini.
Sembunyikan Konten Blog Jika Javascript di Browser Tidak Aktif

Selesai deh cara memasang notifikasi anti noscript dan sembunyikan konten blog jika JavaScript dimatikan. Langsung praktekan di blog masing-masing ya.
14
Cara Membuat Anti Noscript dan Sembunyikan Konten Blog Jika Javascript Dimatikan
Cara Membuat Anti Noscript dan Sembunyikan Konten Blog Jika Javascript Dimatikan
Tutorial sembunyikan dan hapus semua konten blog ketika Javascript di browser tidak aktif / disable / nonaktif dan memasang notifikasi popup anti noscript.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

14 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Anonim
    Anonim20 April, 2022
    mantap kak, sederhana caranya gak ganggu SEO template, :D
  • Afid Arifin
    17 November, 2021
    Profil: https://www.blogger.com/profile/13859718797118374139
    Terima kasih Mba, cukup membantu tutorialnya
  • Unknown
    13 Maret, 2021
    Profil: https://www.blogger.com/profile/10794828091684528864
    bagai mana cara menyembunyikan isi kode script content nya ketika javascript nya di nonaktifkan. ketika notif javascript muncul bisa klik kanan - inpeksi, dan semua source code nya bisa terlihat.. saya ingin ketika javascript nonaktif, source code nya pun tersembunyi. adakah caranya?
  • InYourDream
    02 Agustus, 2019
    Profil: https://www.blogger.com/profile/15424191361649530799
    mantap, arigatou onii-chan
  • Comedy TV
    03 Mei, 2019
    Profil: https://www.blogger.com/profile/07774761357271322369
    di blog saya https://guncedemir.blogspot.com kok ga jadi ya? Masih tetep kliiatan aja tuh
    • Igniel
      06 Mei, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Saya cek di blognya belum ada kode yang terpasang seperti di tutorial.
  • @ataeh
    03 Mei, 2019
    Profil: https://www.blogger.com/profile/06858365733756618186
    ini template manteb banget... whussss....
  • Cekiong
    31 Maret, 2019
    Profil: https://www.blogger.com/profile/16817382764814329295
    thanks infonya gan, sangat membantu dari para maling.
  • Anonim
    Anonim26 Januari, 2019
    it's works. thanks. very ease to apply
  • Giri Diwa Adam
    05 Januari, 2019
    Profil: https://www.blogger.com/profile/11346759223421693465
    Keren
  • Rue
    31 Desember, 2018
    Profil: https://www.blogger.com/profile/07822882997729531965
    cara ganti tampilan anti sciprtnya gimana ?
  • Kak Gibran
    13 Agustus, 2018
    Profil: https://www.blogger.com/profile/10891698028670125157
    Sangat membantu kak :)