Cara Membuat Anti Noscript dan Sembunyikan Konten Blog Jika Javascript Dimatikan
Cara Membuat Anti Noscript dan Sembunyikan Konten Blog Jika Javascript Dimatikan
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.
Selesai deh cara memasang notifikasi anti noscript dan sembunyikan konten blog jika JavaScript dimatikan. Langsung praktekan di blog masing-masing ya.
Tidak ada komentar untuk "Cara Membuat Anti Noscript dan Sembunyikan Konten Blog Jika Javascript Dimatikan"
Posting Komentar