Cara Membuat Anti Noscript dan Sembunyikan Konten Blog Jika Javascript Dimatikan

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.

Artikel Terkait

15 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • 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>
  • Fap Natic
    20/4/22
    Profil: https://www.blogger.com/profile/10832013718320114091
    mantap kak, sederhana caranya gak ganggu SEO template, :D
  • Afid Arifin
    7/2/22
    Profil: https://www.blogger.com/profile/16155767877295809724
    Terima kasih, sangat work di blog saya.
  • Afid Arifin
    17/11/21
    Profil: https://www.blogger.com/profile/13859718797118374139
    Terima kasih Mba, cukup membantu tutorialnya
  • Unknown
    13/3/21
    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
    2/8/19
    Profil: https://www.blogger.com/profile/15424191361649530799
    mantap, arigatou onii-chan
  • Comedy TV
    3/5/19
    Profil: https://www.blogger.com/profile/07774761357271322369
    di blog saya https://guncedemir.blogspot.com kok ga jadi ya? Masih tetep kliiatan aja tuh
    • Igniel
      6/5/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Saya cek di blognya belum ada kode yang terpasang seperti di tutorial.
  • @ataeh
    3/5/19
    Profil: https://www.blogger.com/profile/06858365733756618186
    ini template manteb banget... whussss....
  • Cekiong
    31/3/19
    Profil: https://www.blogger.com/profile/16817382764814329295
    thanks infonya gan, sangat membantu dari para maling.
  • Anonim
    Anonim 26/1/19
    it's works. thanks. very ease to apply
  • Giri Diwa Adam
    5/1/19
    Profil: https://www.blogger.com/profile/11346759223421693465
    Keren
  • Rue
    31/12/18
    Profil: https://www.blogger.com/profile/07822882997729531965
    cara ganti tampilan anti sciprtnya gimana ?
    • Igniel
      31/12/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Edit kode CSSnya.
    • Rue
      1/1/19
      Profil: https://www.blogger.com/profile/07822882997729531965
      ajari cara nya kk
  • Kak Gibran
    13/8/18
    Profil: https://www.blogger.com/profile/10891698028670125157
    Sangat membantu kak :)