Cara Menampilkan Peringatan Untuk Non Javascript Browser

---

Javascript merupakan salah satu komponen penting yang sering digunakan dalam sebuah blog, tidak hanya itu saja dengan semakin canggihnya perkembangan teknologi, penggunaan javascript menjadi bagian yang tidak dapat terpisahkan dalam teknologi internet.

Penggunaan javascript khususnya pada halaman website atau blog akan membuat tampilan halaman blog terlihat dinamis dan semakin menarik. Javascript memiliki fungsionalitas yang fleksible yang berarti bahwa penggunaan javascript dalam sebuah halaman website / blog bisa dipadu-padankan dengan kode HTML dan kode CSS.

Biasanya JavaScript di-embbed secara langsung ke halaman website atau diarahkan melalui file .js yang terpisah. JavaScript merupakan bahasa dari sisi klien yang berarti script diunduh di perangkat yang dimiliki oleh pengunjung situs Anda, lalu diproses di sana. Berbeda dengan halnya bahasa di sisi server yang dijalankan pada server sebelum bahasa pemrograman tersebut mengirimkan file ke pengunjung situs.

Perlu diketahui, sebagian web browser juga menawarkan kesempatan bagi user untuk menonaktifkan JavaScript. Setiap browser ada pengaturan untuk enable (aktif) dan disable (nonaktif). Maka akan muncul masalah besar jika Javascript di dalam browser dinonaktifkan, tampilan blog akan menjadi tidak sesuai dari tampilan yang sudah didesign karena semua script yang dibuat tidak bisa berfungsi sebagaimana mestinya. Karena itulah, sangat disarankan bagi anda untuk memasang notifikasi tentang apa yang terjadi pada event yang terlihat di browser pengguna.

Informasi Singkat

---

JavaScript (/ˈdʒɑːvəˌskrɪpt/) adalah bahasa pemrograman tingkat tinggi dan dinamis. JavaScript populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Google Chrome, Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT. JavaScript merupakan salah satu teknologi inti World Wide Web selain HTML dan CSS. JavaScript membantu membuat halaman web interaktif dan merupakan bagian aplikasi web yang esensial.

Awalnya hanya diimplementasi sebagai client-side dalam penjelajah web, kini engine JavaScript disisipkan ke dalam perangkat lunak lain seperti dalam server-side dalam server web dan basis data, dalam program non web seperti perangkat lunak pengolah kata dan pembaca PDF, dan sebagai runtime environment yang memungkinkan penggunaan JavaScript untuk membuat aplikasi desktop maupun mobile.

Sejarah
JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape di bawah nama Mocha, yang nantinya namanya diganti menjadi LiveScript, dan akhirnya menjadi JavaScript.

Navigator sebelumnya telah mendukung Java untuk lebih bisa dimanfaatkan para pemrogram yang non-Java. Maka dikembangkanlah bahasa pemrograman bernama LiveScript untuk mengakomodasi hal tersebut. Bahasa pemrograman inilah yang akhirnya berkembang dan diberi nama JavaScript, walaupun tidak ada hubungan bahasa antara Java dengan JavaScript.

JavaScript bisa digunakan untuk banyak tujuan, misalnya untuk membuat efek rollover baik di gambar maupun teks, dan yang penting juga adalah untuk membuat AJAX. JavaScript adalah bahasa yang digunakan untuk AJAX.

---

Sumber : Wikipedia

Pengguna mungkin menonaktifkan JavaScript untuk sejumlah alasan. Mereka mungkin akan melakukan hal ini untuk mengatasi keterbatasan bandwidth, untuk menyimpan daya baterai telepon mereka, mungkin juga untuk privasi sehingga mereka tidak akan dilacak dengan script analitis. Sejumlah orang bahkan menginstal ekstensi browser seperti NoScript untuk mencegah browser dari menjalankan JavaScript. Cukuplah untuk dikatakan, jika JavaScript dinonaktifkan, banyak situs web dan apps gagal berfungsi, jika tidak seluruhnya maka sebagian tidak akan terlihat dengan normal.

Cara mengatasi agar pengguna tidak bisa mengakses halaman blog tanpa javascript adalah dengan memasang notifikasi agar pengguna mau menghidupkan fungsi javascript pada saat mengunjungi blog anda. Notifikasi ini akan menyembunyikan konten artikel dan hanya menampilkan box Berikut beberapa tampilan notifikasi yang berfungsi mencegah pengguna melihat halaman blog yang berantakan akibat dinonaktifkannya fungsi javascript pada browser pengguna.

DAFTAR ISI

1. Notifikasi NoScript Dengan Tampilan Seadanya
2. Notifikasi NoScript Dengan Tampilan Menarik
3. Notifikasi NoScript Dengan Tampilan Animasi
4. Notifikasi NoScript Dengan Tampilan Horor
5. Cara Modifikasi Tampilan Notifikasi NoScript
6. Bonus Artikel [Source Code Notifikasi NoScript]

---

PERINGATAN

Perhatian ! sebelum melakukan perubahan pada kode HTML template blog, sebaiknya Anda melakukan backup kode HTML template blog terlebih dahulu, dikarenakan untuk menghindari hal-hal yang tidak diinginkan. Apabila terjadi kesalahan prosedur dalam melakukan perubahan kode HTML template blog, maka Anda dapat melakukan proses perbaikan dengan cepat dan mudah.

#1 Notifikasi NoScript Dengan Tampilan Seadanya

Notifikasi NoScript Dengan Tampilan Seadanya menampilkan warna dominan biru dengan tulisaan teks biasa dan logo HTML 5. Bagi anda yang menggunakan template blog dengan jenis minimalis maka notifikasi noJS Script ini cocok untuk anda gunakan. Berikut contoh tampilan Notifikasi NoScript.

Aktifkan Javascript

Untuk mengakses konten blog, hidupkan Javascript di dalam pengaturan browser.

<noscript>
<style>
#content-wrapper, #footer-wrapper {display:none}
body,html {overflow:hidden}
.simpleCF {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;}
.simpleCF .isiNoscript{background:#3366cc;color:#fff;position:absolute;text-align:center;padding:0 30px 30px 30px;margin:auto;top:16%;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:bounce .5s 5; -moz-animation: bounce .5s 5; -webkit-animation:bounce .5s 5; -o-animation:bounce .5s 5;}
.simpleCF .isiNoscript img{}
.simpleCF .isiNoscript h4, .simpleCF .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}
@keyframes bounce {50% {transform: translateY(-10px);}}
@media screen and (max-width: 600px) {
.simpleCF .isiNoscript{top:16%;margin:0;}
.simpleCF .isiNoscript h4, .simpleCF .isiNoscript .judul{font-size:16px;}
.simpleCF .isiNoscript{font-size:16px;}
.simpleCF .isiNoscript img{width:80%;}
}
</style>
<div class='codeflareNoScript simpleCF'>
<div class='isiNoscript'><span class='judul'>Aktifkan Javascript</span>
<br/>
<i class="fa fa-html5 fa-5x" aria-hidden="true"></i>
<br/>
Untuk mengakses konten blog, hidupkan Javascript di dalam pengaturan browser.</div>
</div>
</noscript>

Silakan disesuaikan warna background, border atau ukuran font pada kode CSS diatas agar bisa sesuai dengan tema blog yang anda gunakan.

#2 Notifikasi NoScript Dengan Tampilan Menarik

Notifikasi NoScript Dengan Tampilan Menarik ini hampir sama dengan dengan tipe diatas namun yang membedakan adalah tampilan gambar dan animasi hover pada gambar yang digunakan, untuk penggunaan warna latar silakan disesuaikan sendiri agar bisa menyesuaikan dengan tema blog anda. Berikut contoh tampilan Notifikasi NoScript.

Aktifkan Javascript

Untuk mengakses konten blog, hidupkan Javascript di dalam pengaturan browser.

<noscript>
<style>
#content-wrapper, #footer-wrapper {display:none}
body,html {overflow:hidden}
.codeflareNoScript {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;}
.codeflareNoScript .isiNoscript{
color:#fff;text-align:center;
padding:0 30px 30px 30px;
margin:auto;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:2px solid #FF00B2;
border-radius:5px;
overflow:hidden;
-webkit-transform:translateZ(0); transform:translateZ(0);
backface-visibility:visible;
transform-origin:bottom center; pointer-events:auto;
transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
opacity:1;
animation:bounce .5s 5;
-moz-animation: bounce .5s 5;
-webkit-animation:bounce .5s 5;
-o-animation:bounce .5s 5;
background: rgb(249,202,249);
background: -moz-linear-gradient(top,  rgba(249,202,249,1) 0%, rgba(255,124,216,1) 100%);
background: -webkit-linear-gradient(top,  rgba(249,202,249,1) 0%,rgba(255,124,216,1) 100%);
background: linear-gradient(to bottom,  rgba(249,202,249,1) 0%,rgba(255,124,216,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9caf9', endColorstr='#ff7cd8',GradientType=0 );
}
.isiNoscript:hover > img{
animation:bounce .5s infinite;
-moz-animation: bounce .5s infinite;
-webkit-animation:bounce .5s infinite;
-o-animation:bounce .5s infinite;
}
.codeflareNoScript .isiNoscript h4, .codeflareNoScript .isiNoscript .judul{display:inline-block;background:rgba(0,0,0,.07);padding:5px 25px 15px 25px;border-radius:0 0 10px 10px;font-size:2.2rem;font-weight:600;margin-bottom:20px}
@keyframes bounce {50% {transform: translateY(-10px);}}
@media screen and (max-width: 600px) {
.codeflareNoScript .isiNoscript{top:16%;margin:0;}
.codeflareNoScript .isiNoscript h4, .codeflareNoScript .isiNoscript .judul{font-size:16px;}
.codeflareNoScript .isiNoscript{font-size:16px;}
.codeflareNoScript .isiNoscript img{width:80%;}
}
</style>
<div class='codeflareNoScript'>
<div class='isiNoscript'><span class='judul'>Aktifkan Javascript</span><br/><img src ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjd4YvyjQJLn7QlSkZ6NOasjxWH_Y48WQ1O6r-N8NjnnbeMTartO1w3o3gxRQyTzZ8VjZXxRnda_W7qAqp0CtUVqfddTlFYRYih2fiFWn36e61nuF2DEyt_jsvg12DbJcySurfE7d-Gw/s320/0_16c5e4_f98bb706_L.png"/><br/>Untuk mengakses konten blog, hidupkan Javascript di dalam pengaturan browser.</div>
</div>
</noscript>

Silakan disesuaikan warna background, border atau ukuran font pada kode CSS diatas agar bisa sesuai dengan tema blog yang anda gunakan.

#3 Notifikasi NoScript Dengan Tampilan Animasi

Notifikasi NoScript Dengan Tampilan Animasi menggunakan animasi kapal roket yang pada saat mouse hover pada kotak notifikasi akan memberikan kesan dinamis dengan tampilan animasi roket yang menuju keatas. Animasi yang ditampilkan murni menggunakan kode CSS dan juga menggunakan gambar bertipe SVG. Berikut contoh tampilan Notifikasi NoScript.

Aktifkan JavaScript

Untuk mengakses konten blog, hidupkan Javascript di dalam pengaturan browser.

<noscript>
<style>
#content-wrapper, #footer-wrapper {display:none}
body,html {overflow:hidden}
.codeflareNoScript {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;}
.codeflareNoScript .isiNoscript{
color:#fff;position:absolute;text-align:center;
padding:0 30px 30px 30px;margin:auto;
top:20%;left:0;right:0;
font-size:18px;font-weight:400;
font-family:monospace;
max-width:670px;
border:4px outset #eee;
overflow:hidden;
backface-visibility:visible;
-webkit-transform:translateZ(0);
transform:translateZ(0);
transform-origin:bottom center;
pointer-events:auto;
transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
opacity:1;
background: rgb(167,207,223);
background: -moz-linear-gradient(top,  rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
background: -webkit-linear-gradient(top,  rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%);
background: linear-gradient(to bottom,  rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 );
}
.codeflareNoScript .isiNoscript h4, .codeflareNoScript .isiNoscript .judul{display:inline-block;background:rgba(0,0,0,.07);border-radius:0 0 10px 10px;padding:5px 25px 15px 25px;font-size:2.2rem;font-weight:600;margin-bottom:20px}
#rocket{animation:bounce 1s infinite; -moz-animation: bounce 1s infinite; -webkit-animation:bounce 1s infinite; -o-animation:bounce 1s infinite;}
.isiNoscript:hover > .shuttle svg #rocket {animation:travel 5s ease .1s forwards;-moz-animation:travel 5s ease .1s forwards;-webkit-animation:travel 5s ease .1s forwards;-o-animation:travel 5s ease .1s forwards;}
.isiNoscript:hover > .shuttle svg #clouds {animation:cloudClear 5s ease .1s forwards;-moz-animation:cloudClear 5s ease .1s forwards;-webkit-animation:cloudClear 5s ease .1s forwards;-o-animation:cloudClear 5s ease .1s forwards;}
@keyframes cloudClear {
50%{opacity:0.4;}
100%{opacity:0;}
}
@keyframes travel {
0% {transform: translateY(-10px);}
50%{transform: translateY(-100px);}
100% {transform: translateY(-2000px);}
}
@keyframes bounce {50% {transform: translateY(-10px);}}
@media screen and (max-width: 600px) {
.codeflareNoScript .isiNoscript{top:16%;}
.codeflareNoScript .isiNoscript h4, .codeflareNoScript .isiNoscript .judul{font-size:16px;}
.codeflareNoScript .isiNoscript{font-size:16px;}
}
</style>
<div class='codeflareNoScript'>
<div class='isiNoscript'><span class='judul'>Aktifkan <i class="fa fa-cog fa-spin"></i> JavaScript</span>
<br/>
<div class="shuttle">
<svg viewBox="0 0 2130 980">
<defs>
<linearGradient id="linear-gradient" x1="802.15" y1="-1" x2="802.15" y2="210.6" gradientTransform="matrix(1, 0, 0, -1, 365.1, 979)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f2ecdf" stop-opacity="0.01"/>
<stop offset="0.2" stop-color="#f3eadb" stop-opacity="0.15"/>
<stop offset="0.41" stop-color="#f4e6ce" stop-opacity="0.29"/>
<stop offset="0.62" stop-color="#f7ddba" stop-opacity="0.44"/>
<stop offset="0.83" stop-color="#fbd29d" stop-opacity="0.58"/>
<stop offset="1" stop-color="#ffc780" stop-opacity="0.7"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="597.85" y1="1.4" x2="597.85" y2="210.6" xlink:href="#linear-gradient"/>
<linearGradient id="linear-gradient-3" x1="700" y1="-38.2" x2="700" y2="279.72" gradientTransform="matrix(1, 0, 0, -1, 365.1, 979)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#95bed3" stop-opacity="0"/>
<stop offset="1" stop-color="#ffc780" stop-opacity="0.9"/>
</linearGradient>
</defs>
<title>CodeFlare Blogspot</title>
<g id="backgroundStars">
<g id="stars">
<circle cx="1181.2" cy="266.2" r="6.4" fill="#537f98"/>
<circle cx="828" cy="380.2" r="5.3" fill="#537f98"/>
<circle cx="766.6" cy="254.4" r="5.2" fill="#537f98"/>
<circle cx="909.2" cy="218.1" r="4" fill="#537f98"/>
<circle cx="1428.1" cy="347.4" r="5.3" fill="#537f98"/>
<circle cx="676.4" cy="627.9" r="4" fill="#537f98"/>
<circle cx="1339.5" cy="593.3" r="5.3" fill="#537f98"/>
<circle cx="1276.5" cy="318.6" r="5.2" fill="#537f98"/>
<circle cx="820.1" cy="530.3" r="5.2" fill="#537f98"/>
<circle cx="1435.9" cy="487.8" r="5.2" fill="#537f98"/>
<circle cx="1322.9" cy="431.2" r="4" fill="#537f98"/>
<circle cx="1217.8" cy="157.8" r="4" fill="#537f98"/>
<circle cx="1054.9" cy="108.3" r="3.8" fill="#537f98"/>
<circle cx="690.8" cy="452.1" r="6.5" fill="#537f98"/>
</g>
</g>
<g id="rocket">
<g id="spaceship">
<g>
<path d="M763.7,223.4H635.5c-.6,3.6-.9,6.6-1.1,9H764.9Q764.6,228.8,763.7,223.4Z" transform="translate(365.1)" fill="#d17a3d"></path>
<path d="M633.4,230.8c-.1,1.1-.2,2-.2,2.7V662.2H766V233.5c0-.7-.1-1.6-.2-2.7Z" transform="translate(365.1)" fill="#f18d46"></path>
<path d="M699.6,145.1c-27.2,0-60.2,53.9-65.1,78.4H764.7C759.8,199,726.9,145.1,699.6,145.1Z" transform="translate(365.1)" fill="#f18d46"></path>
<path d="M755.2,685.5V233.7c0-12.8-20.1-88.6-56.4-88.6l-3.4.2a31.9,31.9,0,0,0-9.2,2.3c32.2,13.1,44,74.6,44,86.1V685.5Z" transform="translate(365.1)" fill="#fff" opacity="0.15" style="isolation: isolate"></path>
</g>
<g id="flame"><polygon points="1268.8 980 1065.7 980 1106.5 768.4 1227.9 768.4 1268.8 980" fill="url(#linear-gradient)"></polygon><polygon points="1064.5 977.6 861.4 977.6 902.3 768.4 1023.7 768.4 1064.5 977.6" fill="url(#linear-gradient-2)"></polygon><g>
<polygon points="1173.2 979.2 957 979.2 1004.4 699.1 1123.4 699.1 1173.2 979.2" fill="url(#linear-gradient-3)"></polygon>
<polygon points="1133.9 979.2 996.3 979.2 1044.5 699.1 1084.7 699.1 1133.9 979.2" opacity="0.5" fill="url(#linear-gradient-3)" style="isolation: isolate"></polygon>
</g></g>
<g>
<path d="M767.5,408.5a15.6,15.6,0,0,0-.1,2V728h69.3V410.5a15.6,15.6,0,0,0-.1-2Z" transform="translate(365.1)" fill="#f1e5d0"></path>
<rect x="1132.5" y="681" width="69.3" height="8.5" fill="#e2cda6"></rect>
<rect x="1132.5" y="718.7" width="69.3" height="7.2" fill="#e2cda6"></rect>
<path d="M802.1,345.8c-21.5,0-31.4,37.9-34,55.1H836C833.5,383.7,823.7,345.8,802.1,345.8Z" transform="translate(365.1)" fill="#f1e5d0"></path>
<path d="M836.1,399.9H768.2c-.3,2-.5,8-.6,9.4h69.2C836.6,407.9,836.4,401.9,836.1,399.9Z" transform="translate(365.1)" fill="#e2cda6"></path>
<polygon points="1201.9 725.5 1132.5 725.5 1106.5 753.1 1227.9 753.1 1201.9 725.5" fill="#eddfc4"></polygon>
<rect x="1106.5" y="753.1" width="121.4" height="15.3" fill="#405059"></rect>
<g>
<polygon points="1170.4 455.6 1187.2 455.6 1187.2 480.8 1170.4 480.8 1170.4 489.3 1201.9 489.3 1201.9 480.8 1195.6 480.8 1195.6 455.6 1201.9 455.6 1201.9 447.2 1170.4 447.2 1170.4 455.6" fill="#4a5962"></polygon>
<rect x="1187.2" y="497.7" width="8.4" height="25.3" fill="#4a5962"></rect>
<polygon points="1195.6 531.3 1170.4 531.3 1170.4 573.4 1178.8 573.4 1178.8 539.8 1187.2 539.8 1187.2 573.4 1201.9 573.4 1201.9 565 1195.6 565 1195.6 531.3" fill="#4a5962"></polygon>
<path d="M805.3,623.9h31.5v-8.4h-6.3V590.2h6.3v-8.4H805.3Z" transform="translate(365.1)" fill="#4a5962"></path>
</g>
<path d="M831.5,670.2V408.1c0-9-7.8-62.1-29.4-62.2h-1.8a13.6,13.6,0,0,0-4.8,1.6c16.8,9.2,23,52.4,23,60.5V670.2" transform="translate(365.1)" fill="#fff" opacity="0.3" style="isolation: isolate"></path>
<polygon points="1227.9 753.1 1132.5 697 1132.5 670.7 1201.9 670.7 1201.9 725.5 1227.9 753.1" opacity="0.1" style="isolation: isolate"></polygon>
</g>
<g>
<path d="M562.6,408.5a15.6,15.6,0,0,0-.1,2V728h69.3V410.5a15.6,15.6,0,0,0-.1-2Z" transform="translate(365.1)" fill="#f1e5d0"></path>
<rect x="927.7" y="681" width="69.3" height="8.5" fill="#e2cda6"></rect>
<rect x="927.7" y="718.7" width="69.3" height="7.2" fill="#e2cda6"></rect>
<path d="M597.2,345.8c-21.5,0-31.4,37.9-34,55.1h67.9C628.6,383.7,618.8,345.8,597.2,345.8Z" transform="translate(365.1)" fill="#f1e5d0"></path>
<path d="M631.2,399.9H563.3c-.3,2-.5,8-.6,9.4h69.2C631.7,407.9,631.5,401.9,631.2,399.9Z" transform="translate(365.1)" fill="#e2cda6"></path>
<polygon points="997 725.5 927.7 725.5 901.6 753.1 1023 753.1 997 725.5" fill="#eddfc4"></polygon>
<rect x="901.6" y="753.1" width="121.4" height="15.3" fill="#405059"></rect>
<path d="M626.6,637V408.1c0-9-7.8-62.1-29.4-62.2h-1.8a13.6,13.6,0,0,0-4.8,1.6c16.8,9.2,23,52.4,23,60.5V637" transform="translate(365.1)" fill="#fff" opacity="0.3" style="isolation: isolate"></path>
<polygon points="1023 753.1 927.7 697 927.7 670.7 997 670.7 997 725.5 1023 753.1" opacity="0.1" style="isolation: isolate"></polygon>
</g>
<g>
<g>
<polygon points="888.7 670.2 888.7 636.9 1018.9 463.2 1113.1 463.2 1240.9 637 1240.9 670.2 888.7 670.2" fill="#e6d5b3"></polygon>
<polygon points="1240.9 637 1240.9 671.6 888.7 671.6 888.7 636.9 1240.9 637" fill="#f0e4ce"></polygon>
<polygon points="888.7 641.2 888.7 637 896.8 629.7 1232 629.7 1240.9 636.9 1240.9 641.2 888.7 641.2" fill="#f5eddf"></polygon>
<polygon points="888.7 636.9 897.2 625.4 1232.3 625.4 1240.9 637 888.7 636.9" fill="#e9d9bb"></polygon>
<polygon points="1128.2 587 1128.2 484 1113.3 464 1006.2 671.6 1155.6 671.6 1155.6 638.2 1128.2 587" fill="#bfae8d" opacity="0.2" style="isolation: isolate"></polygon>
<polygon points="1003.8 587 1003.8 484 1018.7 464 1125.8 671.6 976.4 671.6 976.4 638.2 1003.8 587" fill="#bfae8d" opacity="0.2" style="isolation: isolate"></polygon>
</g>
<path d="M746.9,598.3V334.1c0-31.7-11.7-62.2-32.6-84.6a19.8,19.8,0,0,0-29.4,0c-20.8,22.4-32.6,52.9-32.6,84.6V598.4L625,647.9V682H774.4V647.9Z" transform="translate(365.1)" fill="#f1e5d0"></path>
<rect x="1016.8" y="590.1" width="96" height="8.5" fill="#e2cda6"></rect>
<polygon points="1139.5 647.9 990.1 647.9 1017.5 598.8 1111.7 598.8 1139.5 647.9" fill="#f1e5d0"></polygon>
<rect x="1005" y="662.7" width="119.5" height="36.4" fill="#364750"></rect>
<rect x="990.1" y="647.9" width="149.4" height="35.5" fill="#405059"></rect>
<rect x="1061.9" y="647.9" width="6.4" height="35.5" fill="#364750"></rect>
<rect x="1061.9" y="613.8" width="6.4" height="34.1" fill="#c1b391"></rect>
<polyline points="1096.1 683.5 1096.1 699.1 1108.9 699.1 1108.9 683.5" fill="#95bed3" opacity="0.2" style="isolation: isolate"></polyline>
<path d="M755.2,683.5V648L736,598.8V309.5c0-9.3-10.2-62.2-38.5-66.3-1.1-.2-8.6,3.8-8.6,3.8,20.7,13.1,28.5,54.4,28.5,62.5V598.8L736.6,648v35.4" transform="translate(365.1)" fill="#fff" opacity="0.3" style="isolation: isolate"></path>
<circle cx="700" cy="349.4" r="30.8" transform="translate(323.1 597.3) rotate(-45)" fill="#e2cda6"></circle>
<g>
<path d="M681.5,367.8a26.1,26.1,0,1,1,36.9-36.9" transform="translate(365.1)" fill="#7da0b3"></path>
<path d="M718.5,330.9a26.1,26.1,0,1,1-36.9,36.9" transform="translate(365.1)" fill="#537f98"></path>
</g>
</g>
</g>
<g id="yellow_stars" data-name="yellow stars">
<path d="M939.2,759.6a9.7,9.7,0,0,1-8.1-8.1h-.2a9.7,9.7,0,0,1-8.1,8.1c-.1,0-.1.2,0,.2a9.5,9.5,0,0,1,8.1,8.1h.2a9.7,9.7,0,0,1,8.1-8.1C939.3,759.8,939.3,759.6,939.2,759.6Z" transform="translate(365.1)" fill="#fc6"/>
<path d="M901.9,696.1a.1.1,0,1,0-.3,0,14.7,14.7,0,0,1-12.1,12.1.1.1,0,1,0,0,.3,14.5,14.5,0,0,1,12.1,12.1.1.1,0,1,0,.3,0A14.7,14.7,0,0,1,914,708.5a.1.1,0,1,0,0-.3A14.4,14.4,0,0,1,901.9,696.1Z" transform="translate(365.1)" fill="#fc6"/>
<path d="M469.2,751.5H469a9.7,9.7,0,0,1-8.1,8.1c-.1,0-.1.2,0,.2a9.5,9.5,0,0,1,8.1,8.1h.2a9.7,9.7,0,0,1,8.1-8.1c.1,0,.1-.2,0-.2A9.7,9.7,0,0,1,469.2,751.5Z" transform="translate(365.1)" fill="#fc6"/>
<path d="M498.5,696.1a.1.1,0,1,0-.3,0,14.7,14.7,0,0,1-12.1,12.1.1.1,0,1,0,0,.3,14.4,14.4,0,0,1,12.1,12.1.1.1,0,1,0,.3,0,14.7,14.7,0,0,1,12.1-12.1.1.1,0,1,0,0-.3A14.5,14.5,0,0,1,498.5,696.1Z" transform="translate(365.1)" fill="#fc6"/>
</g>
</g>
<g id="clouds">
<path d="M467.5,950.8a70.7,70.7,0,0,0-21.2,3.3c-7.7-42.2-45.1-74.3-90-74.3a105.5,105.5,0,0,0-11.3.7c-9.8-47.3-52.1-82.9-102.9-82.9a105.5,105.5,0,0,0-40.2,7.9c-14.9-52.9-64-91.8-122.3-91.8a128.5,128.5,0,0,0-34.2,4.6l-.6.2-1.2.4c-41.9,12.1-74.8,45-86.6,86.7a105.2,105.2,0,0,0-40.2-7.9c-50.7,0-93.1,35.6-102.9,82.9a84.7,84.7,0,0,0-11.3-.7c-44.9,0-82.2,32-90,74.3a70.7,70.7,0,0,0-21.2-3.3A68.8,68.8,0,0,0-365.1,980H524A69,69,0,0,0,467.5,950.8Z" transform="translate(365.1)" fill="#faf6ef"/>
<path d="M1708.4,950.8a70.7,70.7,0,0,0-21.2,3.3c-7.7-42.2-45.1-74.3-90-74.3a105.5,105.5,0,0,0-11.3.7c-9.8-47.3-52.1-82.9-102.9-82.9a105.5,105.5,0,0,0-40.2,7.9c-14.9-52.9-64-91.8-122.3-91.8a128.5,128.5,0,0,0-34.2,4.6l-.6.2-1.2.4c-41.9,12.1-74.8,45-86.6,86.7a105.2,105.2,0,0,0-40.2-7.9c-50.7,0-93.1,35.6-102.9,82.9a84.7,84.7,0,0,0-11.3-.7c-44.9,0-82.2,32-90,74.3a70.7,70.7,0,0,0-21.2-3.3A68.8,68.8,0,0,0,875.8,980h889.1A69,69,0,0,0,1708.4,950.8Z" transform="translate(365.1)" fill="#faf6ef"/>
</g>
<g id="moon">
<g id="moon-2" data-name="moon">
<path d="M939.6,218.1a42,42,0,0,0,5.3-52.9,44.2,44.2,0,0,1,6.4,5.2,42,42,0,1,1-59.4,59.4,39.4,39.4,0,0,1-5.2-6.4,42,42,0,0,0,52.9-5.3" transform="translate(365.1)" fill="#d8cfb9"/>
<path d="M944.9,165.1a42.1,42.1,0,0,0-58.3,58.3,42.1,42.1,0,0,0,58.3-58.3" transform="translate(365.1)" fill="#f3ead7"/>
</g>
</g>
</svg>
</div>
Untuk mengakses konten blog, hidupkan Javascript di dalam pengaturan browser.
</div>
</div>
</noscript>

Silakan disesuaikan warna background, border atau ukuran font pada kode CSS diatas agar bisa sesuai dengan tema blog yang anda gunakan.

#4 Notifikasi NoScript Dengan Tampilan Horor

Notifikasi NoScript Dengan Tampilan Horor menampilkan tema horor (seram), tipe ini sangat cocok apabila anda menginginkan sesuatu yang beda dan eksentrik untuk ditampilkan pada blog anda pada saat pengunjung blog tidak mengaktifkan javascript di browsernya. Menggunakan warna dominan hitam dengan efek tulisaan teks yang gliches akan memberikan aksen tegas yang mengisyaratkan agar pengunjung blog wajib mengaktifkan javascript untuk bisa melihat konten blog. Berikut contoh tampilan Notifikasi NoScript.

Aktifkan Javascript

Untuk mengakses konten blog, hidupkan Javascript di dalam pengaturan browser.

<noscript>
<style>
#content-wrapper, #footer-wrapper {display:none}
body,html {overflow:hidden}
.codeflareNoScript {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;}
.codeflareNoScript .isiNoscript{background:#000;color:#fff;position:absolute;text-align:center;padding:0 30px 30px 30px;margin:auto;top:16%;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(255,255,255,.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:bounce .5s 5; -moz-animation: bounce .5s 5; -webkit-animation:bounce .5s 5; -o-animation:bounce .5s 5;}
.codeflareNoScript .isiNoscript img{animation:shaked 5s infinite; -moz-animation: shaked 5s infinite; -webkit-animation:shaked 5s infinite; -o-animation:shaked 5s infinite;}
.codeflareNoScript .isiNoscript h4, .codeflareNoScript .isiNoscript .judul{display:inline-block;background:rgba(255,255,255,.07);border-radius:0 0 10px 10px;padding:5px 25px 15px 25px;font-size:2.2rem;font-weight:600;margin-bottom:20px}
@keyframes shaked {50% {transform: scale(1.04,1.05);}}
@keyframes bounce {50% {transform: translateY(-10px);}}
@media screen and (max-width: 600px) {
.codeflareNoScript .isiNoscript{top:16%;margin:0;}
.codeflareNoScript .isiNoscript h4, .codeflareNoScript .isiNoscript .judul{font-size:16px;}
.codeflareNoScript .isiNoscript{font-size:16px;}
.codeflareNoScript .isiNoscript img{width:80%;}
}
.textGlitch {
  color: #fff;
  position: relative;
  animation: textGlitch1 2.5s infinite;
  -moz-animation: textGlitch1 2.5s infinite;
  -webkit-animation: textGlitch1 2.5s infinite;
  -o-animation: textGlitch1 2.5s infinite;
}
.textGlitch:before,  .textGlitch:after {
  content: attr(data-text);
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}
.textGlitch:before {
  color: #fff;
  animation: textGlitch2 2.5s infinite;
  -moz-animation: textGlitch2 2.5s infinite;
  -webkit-animation: textGlitch2 2.5s infinite;
  -o-animation: textGlitch2 2.5s infinite;
}
.textGlitch:after {
  color: #fff;
  animation: textGlitch3 2.5s infinite;
  -moz-animation: textGlitch3 2.5s infinite;
  -webkit-animation: textGlitch3 2.5s infinite;
  -o-animation: textGlitch3 2.5s infinite;
}
@keyframes textGlitch1{0% {transform: none;opacity: 1;}7% {transform: skew(-0.5deg, -0.9deg);opacity: 0.75;}10% {transform: none;opacity: 1;}27% {transform: none;opacity: 1;}30% {transform: skew(0.8deg, -0.1deg);opacity: 0.75;}35% {transform: none;opacity: 1;}52% {transform: none;opacity: 1;}55% {transform: skew(-1deg, 0.2deg);opacity: 0.75;}50% {transform: none;opacity: 1;}72% {transform: none;opacity: 1;}75% {transform: skew(0.4deg, 1deg);opacity: 0.75;}80% {transform: none;opacity: 1;}100% {transform: none;opacity: 1;}}
@-webkit-keyframes textGlitch1{0% {transform: none;opacity: 1;}7% {transform: skew(-0.5deg, -0.9deg);opacity: 0.75;}10% {transform: none;opacity: 1;}27% {transform: none;opacity: 1;}30% {transform: skew(0.8deg, -0.1deg);opacity: 0.75;}35% {transform: none;opacity: 1;}52% {transform: none;opacity: 1;}55% {transform: skew(-1deg, 0.2deg);opacity: 0.75;}50% {transform: none;opacity: 1;}72% {transform: none;opacity: 1;}75% {transform: skew(0.4deg, 1deg);opacity: 0.75;}80% {transform: none;opacity: 1;}100% {transform: none;opacity: 1;}}
@keyframes textGlitch2{0% {transform: none;opacity: 0.25;}7% {transform: translate(-2px, -3px);opacity: 0.5;}10% {transform: none;opacity: 0.25;}27% {transform: none;opacity: 0.25;}30% {transform: translate(-5px, -2px);opacity: 0.5;}35% {transform: none;opacity: 0.25;}52% {transform: none;opacity: 0.25;}55% {transform: translate(-5px, -1px);opacity: 0.5;}50% {transform: none;opacity: 0.25;}72% {transform: none;opacity: 0.25;}75% {transform: translate(-2px, -6px);opacity: 0.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}
@-webkit-keyframes textGlitch2{0% {transform: none;opacity: 0.25;}7% {transform: translate(-2px, -3px);opacity: 0.5;}10% {transform: none;opacity: 0.25;}27% {transform: none;opacity: 0.25;}30% {transform: translate(-5px, -2px);opacity: 0.5;}35% {transform: none;opacity: 0.25;}52% {transform: none;opacity: 0.25;}55% {transform: translate(-5px, -1px);opacity: 0.5;}50% {transform: none;opacity: 0.25;}72% {transform: none;opacity: 0.25;}75% {transform: translate(-2px, -6px);opacity: 0.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}
@keyframes textGlitch3{0% {transform: none;opacity: 0.25;}7% {transform: translate(2px, 3px);opacity: 0.5;}10% {transform: none;opacity: 0.25;}27% {transform: none;opacity: 0.25;}30% {transform: translate(5px, 2px);opacity: 0.5;}35% {transform: none;opacity: 0.25;}52% {transform: none;opacity: 0.25;}55% {transform: translate(5px, 1px);opacity: 0.5;}50% {transform: none;opacity: 0.25;}72% {transform: none;opacity: 0.25;}75% {transform: translate(2px, 6px);opacity: 0.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}
@-webkit-keyframes textGlitch3{0% {transform: none;opacity: 0.25;}7% {transform: translate(2px, 3px);opacity: 0.5;}10% {transform: none;opacity: 0.25;}27% {transform: none;opacity: 0.25;}30% {transform: translate(5px, 2px);opacity: 0.5;}35% {transform: none;opacity: 0.25;}52% {transform: none;opacity: 0.25;}55% {transform: translate(5px, 1px);opacity: 0.5;}50% {transform: none;opacity: 0.25;}72% {transform: none;opacity: 0.25;}75% {transform: translate(2px, 6px);opacity: 0.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}
</style>
<div class='codeflareNoScript'>
<div class='isiNoscript'><div class='judul'><div class="textGlitch" data-text="Aktifkan Javascript">Aktifkan Javascript</div></div>
<br/>
<img src ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIGeceMkjPgvhLhU3go5QOb6WHLM_G3kK_UZfAjntgXJ9k5toAPlCTCgeImN0ow6pR7Ks1ZOLtN7Z-jIVYihrpID6NYLOcSkfmYjV6FeV2KFuFBgS5gypkc5fshsWb3Cn6FFZ86Nc6Jno/s400/valak.jpg"/>
<br/>
Untuk mengakses konten blog, hidupkan Javascript di dalam pengaturan browser.</div>
</div>
</noscript>

Silakan disesuaikan warna background, border atau ukuran font pada kode CSS diatas agar bisa sesuai dengan tema blog yang anda gunakan.

#5 Cara Modifikasi Tampilan Notifikasi NoScript

Selain dari tipe notifikasi noJS yang sudah admin buatkan, anda juga bisa merubah setiap elemen dari tampilan notifikasi tersebut dengan mengatur kode CSS dari tipe yang akan anda gunakan. Berikut penjelasan singkat dari beberapa kode CSS untuk mempermudah dalam menyesuaikan kode CSS tersebut.

• #content-wrapper, #footer-wrapper {display:none}
  body,html {overflow:hidden}
  
  Digunakan untuk menyembunyikan elemen konten blog, apabila ada elemen lain yang tidak terselubung pada saat notifikasi ini muncul, silakan anda tambahkan elemen id tersebut agar tidak terlihat.


• .codeflareNoScript
  Komponen box utama dari notifikasi noJS, pada komponen ini anda bisa merubah warna latar utama dari box notifikasi.


• .codeflareNoScript .isiNoscript h4, .codeflareNoScript .isiNoscript .judul
  Komponen tulisan teks pada judul notifikasi noJS.


• .codeflareNoScript .isiNoscript
  Komponen tulisan teks yang juga didalamnya terdapat komponen gambar.


• @media screen and (max-width: 600px)
  Kode CSS agar tampilan notifikasi bisa responsif dengan berbagai perangakat yang digunakan oleh pengunjung blog.

Demikian beberapa informasi mengenai kode CSS yang digunakan dalam menampilkan notifikasi noJS. Silakan anda sesuaikan kode-kode tersebut agar bisa terlihat serasi dengan kode tema blog anda.

#6 Bonus Artikel [Source Code Notifikasi NoScript]

Baiklah, untuk bonus konten artikel kali ini adalah "source code" uji coba admin pada saat membuat beberapa tampilan dari notifikas noJS tersebut. Seperti biasa untuk bisa melihat isi konten download link silakan anda pilih dan tekan tombol sosial share yang ada di bawah ini.

This work is licensed under a Creative Commons Attribution 4.0 International License.

Keyword

Blog, Blogspot, Website, noscript, no, javascript, alert, notification, box, css, only, effect, warning, hide, content, sembunyikan, konten, artikel, peringatan, cara, buat, pasang, tanpa, kode, code, image, gambar, tulisan, bagaimana.

Incoming Search Term

No Javascript Notification Alert, Disable Javascript Browser Alert, NoScript Alert, Hide Content No Javascript, Show CSS Alert When Javascript is Disabled, NoScript CSS Effect Notification, Cara Buat Peringatan Ketika Javascript Browser Mati, Peringatan NoScript Box, Kotak Peringatan Javascript Mati, Kode Efek CSS Tanpa Javascript, Modul NoScript Pada Blog, Menampilkan Peringatan Pada Blog Ketika Javascript Tidak Berfungsi.