Memasang javascript minifier di halaman statis

Apa itu Javascript Minifier ?

Javascript minifier adalah alat yang digunakan untuk mengkompresi sebagian kode bahasa javascript atau ECMASCRIPT atau secara keseluruhan kode tersebut, dimana pada kode tersebut terdapat banyak baris kode yang berdampak terhadap kecepatan render suatu aplikasi.

Jika kalian melihat berkunjung ke halaman website dengan waktu memuat yang cukup lama itu dikarenakan ada nya kode yang non-compressed, sebagai contoh di antara jquery.js dan jquery.min.js memiliki ukuran berkas yang berbeda jadi perbedaan nya adalah jika ukuran berkas lebih besar dari ukuran yang di rekomendasikan yaitu di bawah 1 Mega Byte maka sudah di pastikan halaman akan terasa lambat , biasa nya dampak nya akan hang seketika saat memuat website untuk pertama kali saat anda berkunjung sebab browser belum menaruh jejak (cache) dari halaman yang kalian singgahi sebelumnya, kejadian hang biasa nya terjadi pada browser lawas dengan spesifikasi device yang di bawah minimum.

saya mengidentifikasi bahwa browser terkini sudah mampu mengkompres website saat halaman akan dimuat fitur itu disebut gzip compression yang valid kode karakter hanya berguna apabila anda mengaktifkan data safer pada browser non-desktop.

pada wordpress gzip compression digunakan untuk meminimalisasi kode halaman secara keseluruhan termasuk berkas-berkas yang tertanam pada halaman yang akan dimuat di browser desktop.

sayang nya di blogger tidak ada fitur gzip compress otomatis atau plugin yang berkaitan dengan compression jadi harus dilakukan secara manual.

Dalam situasi ini saya akan berbagi cara memasang alat untuk mengkompresi javascript pada halaman statis blogger.
cara nya mudah seperti kalian membuat halaman baru pada blogger namun di sini beda nya halaman itu mengandung kode, pastikan template anda telah terinstal jquery-migrate.

Pertama buka draft.blogger.com lalu klik pages setelah itu klik buat halaman baru dan ketik sebuah nama pada judul halaman untuk judul bebas apa saja di sini saya beri judul "Javascript Minifier" namun jangan lupa berikan deskripsi halaman dengan benar seperti "Halaman ini diperuntukan untuk mengkompressi kode bahasa javascript" lalu klik publish biarkan halaman itu kosong.

Setelah itu edit halaman kosong yang tadi anda buat dan ingat ganti ke HTML Mode.
Salin kode berikut.

<style type="text/css">
.tab{display:block;margin:5px 0}
form.copypasteform{margin:0}
.inlineblock{display:inline-block!important}
.zindex0{z-index:0}.zindex1{z-index:1}.zindex2{z-index:2}
.sub-title,tagline-title{font-weight:400}
.toggle,[id^=drop]{display:none}
.tagline-title{font-size:11px}
li>a:only-child:after{content:''}
.three-lines{position:relative;display:inline-block;width:0.8em;height:0.8em;margin:7px 10px 0 0;border-top:0.1em solid #333;border-bottom:0.1em solid #333}
.three-lines:before{content:"";position:absolute;top:0.3em;left:0;width:100%;border-top:0.1em solid #333}
.hide{display:none}
.maincompress{padding:10px;margin:0;min-height:385px;border-radius:5px;background:#bbccd4;border:1px solid transparent}
ul.tab-nav{font-size:13px;}
ul.tab-nav{list-style:none!important;list-style-type:none!important;position:relative;padding:0;margin:3px 0}
.info{display:block;margin:30px 0}
hr{border-color:transparent;clear:both}
#copyPaste textarea,#output textarea{background:#fff;width:100%;max-width:940px;display:block;height:300px;max-height:300px;box-sizing:border-box;-webkit-box-sizing:border-box;border:1px solid #e1e1e1;margin:0 0 20px;padding-left:10px;padding-right:10px;resize:none}
.info ul{margin-top:10px}
.info li{margin:0 0 0 15px;padding:0;font-size:14px}
.button{background-color:#fff;padding:10px 15px 9px;text-decoration:none;border:1px solid #e1e1e1;font-size:14px;font-family:'Roboto',sans-serif;font-weight:700;color:#333;margin-top:10px}
.button:active,.button:focus,.button:hover{cursor:pointer;cursor:pointer;background:#f3f3f3;color:#333;border:1px solid #d1d1d1}
.button.disabled{background:#f0f0f0;color:#aaa;cursor:not-allowed}
.button.download{margin-right:15px}
.button.compress,.button.clear{background-color:#fff;color:#333;border:1px solid #e1e1e1}
.error{color:red;font-family:'Roboto',sans-serif;white-space:pre}
.error:empty{display:none}
.right{float:right}
.tab-nav li{display:inline-block;margin-bottom:-1px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:10px;cursor:pointer;font-size:13px;text-transform:uppercase;line-height:24px;color:#333;background-color:#f6f8f9;border:1px solid;border-color:#ccc;border-radius:0;-webkit-transition:all .25s ease;transition:all .25s ease;-webkit-tap-highlight-color:rgba(255,255,255,0)}
.tab-nav li.active{color:#fff;border-color:transparent;background-color:#05c096}
button,textarea,input{outline:none}
.tab-pane{min-height:300px}
.file-wrapper {box-sizing:border-box;margin:0 auto;padding:100px;display:block;min-height:300px;height:300px;width:100%;background-color:#fff;position:relative;text-align:center}
.file-wrapper.dragovered{outline-offset:-20px;outline-color:#c8dadf;background-color:#f0f0f0}
.file-wrapper .file-input{width:0.1px;height:0.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}
.file-wrapper .file-label{font-weight:700;color:#333;padding:3px;border:1px solid;border-color:#333;cursor:pointer;text-transform:capitalize}
.file-wrapper .file-list{margin:1em 0;width:100%;height:100%;max-height:300px;overflow-x:hidden;overflow-y:auto}
.file-wrapper .file-item{text-align:left;padding:0 10px;clear:both}
.file-wrapper .file-item .remove{float:right}
.file-wrapper .file-item .remove:hover::after{color:#d03c31;border:1px solid transparent}
.file-wrapper .file-item .remove::after{content:'Remove';cursor:pointer;font-size:13px;color:#F44336;border:1px solid transparent;padding:2px 5px;border-radius:100%}
.file-wrapper .file-item:nth-child(even){background:linear-gradient(to left, #99ffcc 0%, #ccff99 100%)}
.compression,.saving{background:#607D8B;color:#fff;padding:3px;border:1px solid;border-color:transparent;border-radius:15px}
.compression::after{content:'%'}
.saving::after{content:'.kb'}
@media all and (max-width:775px){.description-title,.use-ecmascript-next-label{display:none}.more-dev{display:none}.three-lines{margin:7px 5px 0 0}}
@media all and (max-width:525px){.sub-title{display:none}.tab-nav li{width:100%;font-size:13px}.tab-nav li.active{border-radius:2px 2px 2px 2px}}
.checkbox_animated-marker,.checkbox_animated-marker *,.checkbox_animated-marker *::before,.checkbox_animated-marker *::after{-webkit-box-sizing:border-box;box-sizing:border-box}
.checkbox_animated-marker{position:relative;display:block;min-width:200px;width:100%;max-width:280px;--cb_text-color:#333;--cb_bg-color:#f6f8f9;--cb_bg-color_checked:#05c096;--cb_border-color:#ccc;--cb_marker-bg-color:#fff}
@supports ((max-width:-webkit-max-content) or (max-width:-moz-max-content) or (max-width:max-content)){.checkbox_animated-marker{max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}}
.checkbox_input{position:absolute;opacity:0;z-index:-1}
.checkbox_animated-marker .checkbox_label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:10px 10px 10px 20px;cursor:pointer;font-size:18px;line-height:24px;color:#333;color:var(--cb_text-color);background-color:#f6f8f9;background-color:var(--cb_bg-color);border:1px solid;border-color:#ccc;border-color:var(--cb_border-color);border-radius:0;-webkit-transition:all .25s ease;transition:all .25s ease;-webkit-tap-highlight-color:rgba(255,255,255,0)}
.checkbox_animated-marker .checkbox_label-content{-webkit-box-flex:1;-ms-flex:1;flex:1}
.checkbox_animated-marker .checkbox_marker{position:relative;display:inline-block;width:30px;height:30px;margin-left:25px;background-color:#fff;background-color:var(--cb_marker-bg-color);border:1px solid;border-color:#ccc;border-color:var(--cb_border-color);border-radius:50%;-webkit-transition:all .25s ease;transition:all .25s ease}
.checkbox_marker_short-line,.checkbox_marker_long-line{position:absolute;overflow:hidden;height:3px;background-color:transparent;-webkit-transform-origin:left;transform-origin:left}
.checkbox_marker_short-line{top:11px;left:6px;width:10px;-webkit-transform:rotate(44.5deg);transform:rotate(44.5deg)}
.checkbox_marker_long-line{top:19px;left:12px;width:17px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
.checkbox_marker_short-line::before,.checkbox_marker_long-line::before{content:'';position:absolute;width:100%;height:100%;background-color:#05c096;background-color:var(--cb_bg-color_checked);-webkit-transform:translateX(-110%);transform:translateX(-110%);-webkit-transform-origin:left;transform-origin:left;-webkit-transition:all .15s ease;transition:all .15s ease}
.checkbox_animated-marker .checkbox_input:checked + .checkbox_label{color:#fff;background-color:#05c096;background-color:var(--cb_bg-color_checked)}
.checkbox_animated-marker .checkbox_input:checked + .checkbox_label,.checkbox_animated-marker .checkbox_input:checked + .checkbox_label .checkbox_marker{border-color:transparent}
.checkbox_animated-marker .checkbox_input:checked + .checkbox_label .checkbox_marker_short-line::before,.checkbox_animated-marker .checkbox_input:checked + .checkbox_label .checkbox_marker_long-line::before{-webkit-transform:translateX(0);transform:translateX(0)}
.checkbox_marker_long-line::before,.checkbox_animated-marker .checkbox_input:checked + .checkbox_label .checkbox_marker_short-line::before{-webkit-transition-delay:0s;transition-delay:0s}
.checkbox_marker_short-line::before,.checkbox_animated-marker .checkbox_input:checked + .checkbox_label .checkbox_marker_long-line::before{-webkit-transition-delay:.12s;transition-delay:.12s}
.checkbox_animated-marker .checkbox_input:disabled + .checkbox_label{cursor:default;color:#ccc;color:var(--cb_border-color)}
.checkbox_animated-marker .checkbox_input:disabled:checked + .checkbox_label{background-color:#f6f8f9;background-color:var(--cb_bg-color)}
.checkbox_animated-marker .checkbox_input:disabled:checked + .checkbox_label,.checkbox_animated-marker .checkbox_input:disabled:checked + .checkbox_label .checkbox_marker{border-color:#ccc;border-color:var(--cb_border-color)}
.checkbox_animated-marker .checkbox_input:disabled:checked + .checkbox_label .checkbox_marker_short-line::before,.checkbox_animated-marker .checkbox_input:disabled:checked + .checkbox_label .checkbox_marker_long-line::before{background-color:#ccc;background-color:var(--cb_border-color)}
.checkbox_toggler,.checkbox_toggler *,.checkbox_toggler *::before,.checkbox_toggler *::after{-webkit-box-sizing:border-box;box-sizing:border-box}
.checkbox_toggler{position:relative;display:inline-block;--cb_text-color:#333;--cb_marker-bg-color:#fff;--cb_marker-bg-color_checked:#05c096;--cb_marker-bg-color_disabled:#ccc}
.checkbox_input{position:absolute;opacity:0;z-index:-1}
.checkbox_toggler .checkbox_label{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:50px;width:auto;cursor:pointer;font-size:18px;line-height:18px;color:#333;color:var(--cb_text-color);background-color:transparent;-webkit-transition:all .4s ease;transition:all .4s ease;-webkit-tap-highlight-color:rgba(255,255,255,0)}
@supports ((max-width:-webkit-max-content) or (max-width:-moz-max-content) or (max-width:max-content)){.checkbox_toggler .checkbox_label{width:-webkit-max-content;width:-moz-max-content;width:max-content}}
.checkbox_toggler .checkbox_marker{position:relative;display:inline-block;width:16px;height:16px;background-color:#fff;background-color:var(--cb_marker-bg-color);border-radius:50%;-webkit-box-shadow:0 0 2px 1px rgba(0,0,0,.25),0 3px 2px rgba(0,0,0,.25);box-shadow:0 0 2px 1px rgba(0,0,0,.25),0 3px 2px rgba(0,0,0,.25);-webkit-transition:all .35s ease;transition:all .35s ease}
.checkbox_toggler .checkbox_marker::before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;border-radius:50%;-webkit-animation:toggler-unswitch .4s ease-out;animation:toggler-unswitch .4s ease-out}
.checkbox_label-off,.checkbox_label-on{position:absolute;top:-1px;right:0;-webkit-transform-origin:center;transform-origin:center;-webkit-transition:all .4s ease;transition:all .4s ease}
.checkbox_label-off{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
.checkbox_label-on{opacity:0;-webkit-transform:scale(0);transform:scale(0)}
.checkbox_toggler .checkbox_input:checked + .checkbox_label .checkbox_marker,.checkbox_toggler .checkbox_input:disabled:checked + .checkbox_label .checkbox_marker{background-color:#05c096;background-color:var(--cb_marker-bg-color_checked)}
.checkbox_toggler .checkbox_input:checked + .checkbox_label .checkbox_marker::before{-webkit-animation:toggler-switch .4s ease-out;animation:toggler-switch .4s ease-out}
.checkbox_toggler .checkbox_input:checked + .checkbox_label .checkbox_label-off{opacity:0;-webkit-transform:scale(0);transform:scale(0)}
.checkbox_toggler .checkbox_input:checked + .checkbox_label .checkbox_label-on{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
.checkbox_toggler .checkbox_input:disabled + .checkbox_label{opacity:.5;cursor:default}
.checkbox_toggler .checkbox_input:disabled + .checkbox_label .checkbox_marker{background-color:#ccc;background-color:var(--cb_marker-bg-color_disabled);-webkit-box-shadow:none;box-shadow:none}
@-webkit-keyframes toggler-switch{0%{opacity:0;-webkit-box-shadow:none;box-shadow:none}1%{opacity:.1;-webkit-box-shadow:0 0 0 0 #05c096;box-shadow:0 0 0 0 #05c096;-webkit-box-shadow:0 0 0 0 var(--cb_marker-bg-color_checked);box-shadow:0 0 0 0 var(--cb_marker-bg-color_checked)}99%{opacity:.1;-webkit-box-shadow:0 0 5px 15px #05c096;box-shadow:0 0 5px 15px #05c096;-webkit-box-shadow:0 0 5px 15px var(--cb_marker-bg-color_checked);box-shadow:0 0 5px 15px var(--cb_marker-bg-color_checked)}100%{opacity:0;-webkit-box-shadow:none;box-shadow:none}}
@keyframes toggler-switch{0%{opacity:0;-webkit-box-shadow:none;box-shadow:none}1%{opacity:.1;-webkit-box-shadow:0 0 0 0 #05c096;box-shadow:0 0 0 0 #05c096;-webkit-box-shadow:0 0 0 0 var(--cb_marker-bg-color_checked);box-shadow:0 0 0 0 var(--cb_marker-bg-color_checked)}99%{opacity:.1;-webkit-box-shadow:0 0 5px 15px #05c096;box-shadow:0 0 5px 15px #05c096;-webkit-box-shadow:0 0 5px 15px var(--cb_marker-bg-color_checked);box-shadow:0 0 5px 15px var(--cb_marker-bg-color_checked)}100%{opacity:0;-webkit-box-shadow:none;box-shadow:none}}
@-webkit-keyframes toggler-unswitch{0%{opacity:0;-webkit-box-shadow:none;box-shadow:none}1%{opacity:.15;-webkit-box-shadow:0 0 0 0 #ccc;box-shadow:0 0 0 0 #ccc;-webkit-box-shadow:0 0 0 0 var(--cb_marker-bg-color_disabled);box-shadow:0 0 0 0 var(--cb_marker-bg-color_disabled)}99%{opacity:.15;-webkit-box-shadow:0 0 5px 15px #ccc;box-shadow:0 0 5px 15px #ccc;-webkit-box-shadow:0 0 5px 15px var(--cb_marker-bg-color_disabled);box-shadow:0 0 5px 15px var(--cb_marker-bg-color_disabled)}100%{opacity:0;-webkit-box-shadow:none;box-shadow:none}}
@keyframes toggler-unswitch{0%{opacity:0;-webkit-box-shadow:none;box-shadow:none}1%{opacity:.15;-webkit-box-shadow:0 0 0 0 #ccc;box-shadow:0 0 0 0 #ccc;-webkit-box-shadow:0 0 0 0 var(--cb_marker-bg-color_disabled);box-shadow:0 0 0 0 var(--cb_marker-bg-color_disabled)}99%{opacity:.15;-webkit-box-shadow:0 0 5px 15px #ccc;box-shadow:0 0 5px 15px #ccc;-webkit-box-shadow:0 0 5px 15px var(--cb_marker-bg-color_disabled);box-shadow:0 0 5px 15px var(--cb_marker-bg-color_disabled)}100%{opacity:0;-webkit-box-shadow:none;box-shadow:none}}
.checkbox_ios-style,.checkbox_ios-style *,.checkbox_ios-style *::before,.checkbox_ios-style *::after{-webkit-box-sizing:border-box;box-sizing:border-box}
.checkbox_ios-style{position:relative;display:inline-block;--cb_bg-color:#fff;--cb_bg-color_checked:#05c096;--cb_border-color:#ccc}
.checkbox_input{position:absolute;opacity:0;z-index:-1}
.checkbox_ios-style .checkbox_label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:50px;height:30px;cursor:pointer;background-color:#fff;background-color:var(--cb_bg-color);border:1px solid;border-color:#ccc;border-color:var(--cb_border-color);border-radius:25px;-webkit-transition:all .4s ease;transition:all .4s ease;-webkit-tap-highlight-color:rgba(255,255,255,0)}
.checkbox_ios-style .checkbox_marker{display:block;width:26px;height:26px;background-color:#fff;background-color:var(--cb_bg-color);border-radius:50%;-webkit-box-shadow:2px 4px 6px rgba(0,0,0,.2);box-shadow:2px 4px 6px rgba(0,0,0,.2);-webkit-transform:translateX(1px);transform:translateX(1px);-webkit-transition:all .15s ease;transition:all .15s ease}
.checkbox_ios-style .checkbox_input:checked + .checkbox_label{background-color:#05c096;background-color:var(--cb_bg-color_checked);border-color:transparent}
.checkbox_ios-style .checkbox_input:checked + .checkbox_label .checkbox_marker{-webkit-box-shadow:-2px 4px 6px rgba(0,0,0,.15);box-shadow:-2px 4px 6px rgba(0,0,0,.15);-webkit-transform:translateX(22px);transform:translateX(22px)}
.checkbox_ios-style .checkbox_input:disabled + .checkbox_label{opacity:.5;cursor:default;background-color:#ccc;background-color:var(--cb_border-color)}
.checkbox_ios-style .checkbox_input:disabled + .checkbox_label .checkbox_marker{-webkit-box-shadow:2px 4px 6px rgba(0,0,0,.07);box-shadow:2px 4px 6px rgba(0,0,0,.07)}
.checkbox_ios-style .checkbox_input:disabled:checked + .checkbox_label{background-color:#05c096;background-color:var(--cb_bg-color_checked)}
.checkbox_ios-style .checkbox_input:disabled:checked + .checkbox_label .checkbox_marker{-webkit-box-shadow:-2px 4px 6px rgba(0,0,0,.07);box-shadow:-2px 4px 6px rgba(0,0,0,.07)}
.checkbox_android-style,.checkbox_android-style *,.checkbox_android-style *::before,.checkbox_android-style *::after{-webkit-box-sizing:border-box;box-sizing:border-box}
.checkbox_android-style{position:relative;display:inline-block;--cb_bg-color:#ccc;--cb_bg-color_checked:#05c096;--cb_marker-bg-color:#fff}
.checkbox_input{position:absolute;opacity:0;z-index:-1}
.checkbox_android-style .checkbox_label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:55px;height:30px;cursor:pointer;background-color:#ccc;background-color:var(--cb_bg-color);border-radius:25px;-webkit-transition:all .4s ease;transition:all .4s ease;-webkit-tap-highlight-color:rgba(255,255,255,0)}
.checkbox_android-style .checkbox_marker{display:block;width:22px;height:22px;background-color:#fff;background-color:var(--cb_marker-bg-color);border-radius:50%;-webkit-box-shadow:0 0 1px 0 rgba(0,0,0,.25),0 3px 2px rgba(0,0,0,.25);box-shadow:0 0 1px 0 rgba(0,0,0,.25),0 3px 2px rgba(0,0,0,.25);-webkit-animation:android-style-unswitch .25s linear forwards;animation:android-style-unswitch .25s linear forwards}
.checkbox_android-style .checkbox_input:checked + .checkbox_label{background-color:#05c096;background-color:var(--cb_bg-color_checked)}
.checkbox_android-style .checkbox_input:checked + .checkbox_label .checkbox_marker{-webkit-animation:android-style-switch .25s linear forwards;animation:android-style-switch .25s linear forwards}
.checkbox_android-style .checkbox_input:disabled + .checkbox_label{opacity:.5;cursor:default}
.checkbox_android-style .checkbox_input:disabled + .checkbox_label .checkbox_marker{-webkit-box-shadow:0 0 1px 0 rgba(0,0,0,.1),0 3px 2px rgba(0,0,0,.1);box-shadow:0 0 1px 0 rgba(0,0,0,.1),0 3px 2px rgba(0,0,0,.1)}
@-webkit-keyframes android-style-switch{0%{-webkit-transform:scaleX(1) translateX(4px);transform:scaleX(1) translateX(4px)}25%{-webkit-transform:scaleX(1.5) translateX(7px);transform:scaleX(1.5) translateX(7px)}50%{-webkit-transform:scaleX(1.5) translateX(14px);transform:scaleX(1.5) translateX(14px)}100%{-webkit-transform:scaleX(1) translateX(28px);transform:scaleX(1) translateX(28px)}}
@keyframes android-style-switch{0%{-webkit-transform:scaleX(1) translateX(4px);transform:scaleX(1) translateX(4px)}25%{-webkit-transform:scaleX(1.5) translateX(7px);transform:scaleX(1.5) translateX(7px)}50%{-webkit-transform:scaleX(1.5) translateX(14px);transform:scaleX(1.5) translateX(14px)}100%{-webkit-transform:scaleX(1) translateX(28px);transform:scaleX(1) translateX(28px)}}
@-webkit-keyframes android-style-unswitch{0%{-webkit-transform:scaleX(1) translateX(28px);transform:scaleX(1) translateX(28px)}25%{-webkit-transform:scaleX(1.5) translateX(14px);transform:scaleX(1.5) translateX(14px)}50%{-webkit-transform:scaleX(1.5) translateX(7px);transform:scaleX(1.5) translateX(7px)}100%{-webkit-transform:scaleX(1) translateX(4px);transform:scaleX(1) translateX(4px)}}
@keyframes android-style-unswitch{0%{-webkit-transform:scaleX(1) translateX(28px);transform:scaleX(1) translateX(28px)}25%{-webkit-transform:scaleX(1.5) translateX(14px);transform:scaleX(1.5) translateX(14px)}50%{-webkit-transform:scaleX(1.5) translateX(7px);transform:scaleX(1.5) translateX(7px)}100%{-webkit-transform:scaleX(1) translateX(4px);transform:scaleX(1) translateX(4px)}}
.checkbox_bar,.checkbox_bar *,.checkbox_bar *::before,.checkbox_bar *::after{-webkit-box-sizing:border-box;box-sizing:border-box}
.checkbox_bar{position:relative;display:inline-block;--cb_bg-color:#ccc;--cb_bg-color_checked:#05c096;--cb_marker-bg-color:#fff}
.checkbox_input{position:absolute;opacity:0;z-index:-1}
.checkbox_bar .checkbox_label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:40px;height:10px;cursor:pointer;background-color:#ccc;background-color:var(--cb_bg-color);border-radius:25px;-webkit-transition:all .5s ease;transition:all .5s ease;-webkit-tap-highlight-color:rgba(255,255,255,0)}
.checkbox_bar .checkbox_marker{display:block;width:22px;height:22px;background-color:#fff;background-color:var(--cb_marker-bg-color);border-radius:50%;-webkit-box-shadow:0 0 2px 1px rgba(0,0,0,.25),0 3px 2px rgba(0,0,0,.25);box-shadow:0 0 2px 1px rgba(0,0,0,.25),0 3px 2px rgba(0,0,0,.25);-webkit-transform:translateX(-2px);transform:translateX(-2px);-webkit-transition:all .25s ease;transition:all .25s ease}
.checkbox_bar .checkbox_input:checked + .checkbox_label{background-color:#05c096;background-color:var(--cb_bg-color_checked)}
.checkbox_bar .checkbox_input:checked + .checkbox_label .checkbox_marker{-webkit-transform:translateX(20px);transform:translateX(20px)}
.checkbox_bar .checkbox_input:disabled + .checkbox_label{opacity:.5;cursor:default}
.checkbox_bar .checkbox_input:disabled + .checkbox_label .checkbox_marker{-webkit-box-shadow:0 0 2px 1px rgba(0,0,0,.15),0 3px 2px rgba(0,0,0,.15);box-shadow:0 0 2px 1px rgba(0,0,0,.15),0 3px 2px rgba(0,0,0,.15)}
.checkbox_wave,.checkbox_wave *,.checkbox_wave *::before,.checkbox_wave *::after{-webkit-box-sizing:border-box;box-sizing:border-box}
.checkbox_wave{position:relative;display:inline-block;--cb_bg-color:#ccc;--cb_bg-color_checked:#05c096;--cb_marker-bg-color:#fff}
.checkbox_input{position:absolute;opacity:0;z-index:-1}
.checkbox_wave .checkbox_label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:55px;height:30px;cursor:pointer;background-color:#ccc;background-color:var(--cb_bg-color);border-radius:25px;-webkit-transition:all .4s ease;transition:all .4s ease;-webkit-tap-highlight-color:rgba(255,255,255,0)}
.checkbox_wave .checkbox_marker{position:relative;display:block;width:22px;height:22px;background-color:#fff;background-color:var(--cb_marker-bg-color);border-radius:50%;-webkit-transform:translateX(4px);transform:translateX(4px);-webkit-transition:all .35s ease;transition:all .35s ease}
.checkbox_wave .checkbox_marker::before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;border-radius:50%;-webkit-animation:wave-unswitch .4s ease-out;animation:wave-unswitch .4s ease-out}
.checkbox_wave .checkbox_input:checked + .checkbox_label{background-color:#05c096;background-color:var(--cb_bg-color_checked)}
.checkbox_wave .checkbox_input:checked + .checkbox_label .checkbox_marker{-webkit-transform:translateX(28px);transform:translateX(28px)}
.checkbox_wave .checkbox_input:checked + .checkbox_label .checkbox_marker::before{-webkit-animation:wave-switch .4s ease-out;animation:wave-switch .4s ease-out}
.checkbox_wave .checkbox_input:disabled + .checkbox_label{opacity:.5;cursor:default}
@-webkit-keyframes wave-switch{0%{opacity:0;-webkit-box-shadow:none;box-shadow:none}1%{opacity:.1;-webkit-box-shadow:0 0 0 5px #05c096;box-shadow:0 0 0 5px #05c096;-webkit-box-shadow:0 0 0 5px var(--cb_bg-color_checked);box-shadow:0 0 0 5px var(--cb_bg-color_checked)}99%{opacity:.1;-webkit-box-shadow:0 0 2px 20px #05c096;box-shadow:0 0 2px 20px #05c096;-webkit-box-shadow:0 0 2px 20px var(--cb_bg-color_checked);box-shadow:0 0 2px 20px var(--cb_bg-color_checked)}100%{opacity:0;-webkit-box-shadow:none;box-shadow:none}}
@keyframes wave-switch{0%{opacity:0;-webkit-box-shadow:none;box-shadow:none}1%{opacity:.1;-webkit-box-shadow:0 0 0 5px #05c096;box-shadow:0 0 0 5px #05c096;-webkit-box-shadow:0 0 0 5px var(--cb_bg-color_checked);box-shadow:0 0 0 5px var(--cb_bg-color_checked)}99%{opacity:.1;-webkit-box-shadow:0 0 2px 20px #05c096;box-shadow:0 0 2px 20px #05c096;-webkit-box-shadow:0 0 2px 20px var(--cb_bg-color_checked);box-shadow:0 0 2px 20px var(--cb_bg-color_checked)}100%{opacity:0;-webkit-box-shadow:none;box-shadow:none}}
@-webkit-keyframes wave-unswitch{0%{opacity:0;-webkit-box-shadow:none;box-shadow:none}1%{opacity:.15;-webkit-box-shadow:0 0 0 5px #ccc;box-shadow:0 0 0 5px #ccc;-webkit-box-shadow:0 0 0 5px var(--cb_bg-color);box-shadow:0 0 0 5px var(--cb_bg-color)}99%{opacity:.15;-webkit-box-shadow:0 0 2px 20px #ccc;box-shadow:0 0 2px 20px #ccc;-webkit-box-shadow:0 0 2px 20px var(--cb_bg-color);box-shadow:0 0 2px 20px var(--cb_bg-color)}100%{opacity:0;-webkit-box-shadow:none;box-shadow:none}}
@keyframes wave-unswitch{0%{opacity:0;-webkit-box-shadow:none;box-shadow:none}1%{opacity:.15;-webkit-box-shadow:0 0 0 5px #ccc;box-shadow:0 0 0 5px #ccc;-webkit-box-shadow:0 0 0 5px var(--cb_bg-color);box-shadow:0 0 0 5px var(--cb_bg-color)}99%{opacity:.15;-webkit-box-shadow:0 0 2px 20px #ccc;box-shadow:0 0 2px 20px #ccc;-webkit-box-shadow:0 0 2px 20px var(--cb_bg-color);box-shadow:0 0 2px 20px var(--cb_bg-color)}100%{opacity:0;-webkit-box-shadow:none;box-shadow:none}}
.checkbox_classic,.checkbox_classic *,.checkbox_classic *::before,.checkbox_classic *::after{-webkit-box-sizing:border-box;box-sizing:border-box}
.checkbox_classic{position:relative;display:block;--cb_text-color:#333;--cb_bg-color:#fff;--cb_bg-color_checked:#05c096;--cb_bg-color_disabled:#eee;--cb_border-color:#aaa}
.checkbox_input{position:absolute;opacity:0;z-index:-1}
.checkbox_classic .checkbox_label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(255,255,255,0)}
.checkbox_classic .checkbox_label-content{padding-left:15px;color:#333;color:var(--cb_text-color)}
.checkbox_classic .checkbox_marker{position:relative;display:inline-block;width:18px;height:18px;background-color:#fff;background-color:var(--cb_bg-color);border:1px solid;border-color:#aaa;border-color:var(--cb_border-color);-webkit-box-shadow:0 2px 3px rgba(0,0,0,.1);box-shadow:0 2px 3px rgba(0,0,0,.1);-webkit-transition:all .25s ease;transition:all .25s ease}
.checkbox_classic .checkbox_marker::before{content:'';position:absolute;top:7px;left:3px;opacity:0;display:block;width:11px;height:7px;background-color:transparent;border-bottom:2px solid;border-left:2px solid;border-color:#fff;border-color:var(--cb_bg-color);-webkit-transform-origin:center;transform-origin:center;-webkit-transform:translateY(-65%) rotate(-45deg);transform:translateY(-65%) rotate(-45deg);-webkit-transition:all .25s ease;transition:all .25s ease}
.checkbox_classic .checkbox_input:hover + .checkbox_label .checkbox_marker{border-color:#333;border-color:var(--cb_text-color);-webkit-box-shadow:none;box-shadow:none}
.checkbox_classic .checkbox_input:hover + .checkbox_label .checkbox_marker::before{opacity:.25;border-color:#333;border-color:var(--cb_text-color)}
.checkbox_classic .checkbox_input:checked + .checkbox_label .checkbox_marker{background-color:#05c096;background-color:var(--cb_bg-color_checked);border-color:transparent;-webkit-box-shadow:none;box-shadow:none}
.checkbox_classic .checkbox_input:checked + .checkbox_label .checkbox_marker::before{opacity:1}
.checkbox_classic .checkbox_input:checked:hover + .checkbox_label .checkbox_marker::before{border-color:#fff;border-color:var(--cb_bg-color)}
.checkbox_classic .checkbox_input:disabled + .checkbox_label{cursor:default}
.checkbox_classic .checkbox_input:disabled + .checkbox_label .checkbox_marker{background-color:#eee;background-color:var(--cb_bg-color_disabled);border-color:#aaa;border-color:var(--cb_border-color);-webkit-box-shadow:none;box-shadow:none}
.checkbox_classic .checkbox_input:disabled:hover + .checkbox_label .checkbox_marker::before{opacity:0}
.checkbox_classic .checkbox_input:disabled:checked + .checkbox_label .checkbox_marker::before{opacity:1;border-color:#333;border-color:var(--cb_text-color)}
.checkbox_classic-rnd,.checkbox_classic-rnd *,.checkbox_classic-rnd *::before,.checkbox_classic-rnd *::after{-webkit-box-sizing:border-box;box-sizing:border-box}
.checkbox_classic-rnd{position:relative;display:block;--cb_text-color:#333;--cb_bg-color:#fff;--cb_bg-color_checked:#05c096;--cb_bg-color_disabled:#eee;--cb_border-color:#aaa}
.checkbox_input{position:absolute;opacity:0;z-index:-1}
.checkbox_classic-rnd .checkbox_label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(255,255,255,0)}
.checkbox_classic-rnd .checkbox_label-content{padding-left:15px;color:#333;color:var(--cb_text-color)}
.checkbox_classic-rnd .checkbox_marker{position:relative;display:inline-block;width:22px;height:22px;background-color:#fff;background-color:var(--cb_bg-color);border:1px solid;border-color:#aaa;border-color:var(--cb_border-color);border-radius:50%;-webkit-box-shadow:0 2px 3px rgba(0,0,0,.1);box-shadow:0 2px 3px rgba(0,0,0,.1);-webkit-transition:all .25s ease;transition:all .25s ease}
.checkbox_classic-rnd .checkbox_marker::before{content:'';position:absolute;top:9px;left:4px;opacity:0;display:block;width:12px;height:8px;background-color:transparent;border-bottom:2px solid;border-left:2px solid;border-color:#fff;border-color:var(--cb_bg-color);-webkit-transform-origin:center;transform-origin:center;-webkit-transform:translateY(-65%) rotate(-45deg);transform:translateY(-65%) rotate(-45deg);-webkit-transition:all .25s ease;transition:all .25s ease}
.checkbox_classic-rnd .checkbox_input:hover + .checkbox_label .checkbox_marker{border-color:#333;border-color:var(--cb_text-color);-webkit-box-shadow:none;box-shadow:none}
.checkbox_classic-rnd .checkbox_input:hover + .checkbox_label .checkbox_marker::before{opacity:.25;border-color:#333;border-color:var(--cb_text-color)}
.checkbox_classic-rnd .checkbox_input:checked + .checkbox_label .checkbox_marker{background-color:#05c096;background-color:var(--cb_bg-color_checked);border-color:transparent;-webkit-box-shadow:none;box-shadow:none}
.checkbox_classic-rnd .checkbox_input:checked + .checkbox_label .checkbox_marker::before{opacity:1}
.checkbox_classic-rnd .checkbox_input:checked:hover + .checkbox_label .checkbox_marker::before{border-color:#fff;border-color:var(--cb_bg-color)}
.checkbox_classic-rnd .checkbox_input:disabled + .checkbox_label{cursor:default}
.checkbox_classic-rnd .checkbox_input:disabled + .checkbox_label .checkbox_marker{background-color:#eee;background-color:var(--cb_bg-color_disabled);border-color:#aaa;border-color:var(--cb_border-color);-webkit-box-shadow:none;box-shadow:none}
.checkbox_classic-rnd .checkbox_input:disabled:hover + .checkbox_label .checkbox_marker::before{opacity:0}
.checkbox_classic-rnd .checkbox_input:disabled:checked + .checkbox_label .checkbox_marker::before{opacity:1;border-color:#333;border-color:var(--cb_text-color)}
#show-minifier{background-color:#05c096;border:none;color:white;padding:15px 32px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;margin:4px 2px;cursor:pointer;border:none;outline:none}
#js-compress{display:none;position:fixed;z-index:99;padding:55px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
.js-compress-content{background-color:#bbccd4;margin:auto;padding:20px;border:1px solid transparent;width:80%}
.js-compress-close{color:#f1f1f1;background:#607D8B;padding:5px 10px;border:1px solid transparent;border-radius:100%;margin:0;width:auto;height:auto;float:right;font-size:28px;font-weight:700;position:absolute;top:6%;right:12%;transition:all 200ms ease;}
.js-compress-close:hover,.js-compress-close:focus{color:#fff;background:#536c78;text-decoration:none;cursor:pointer}
</style>
<div style="text-align:center;display:block"> <button id="show-minifier">Buka Tools</button></div><div id="js-compress"><div class="js-compress-content"> <span class="js-compress-close">&times;</span><div class="maincompress"><ul class="tab-nav inlineblock"><li data-tab="copyPaste" class="tab-nav-item">Copy &amp; Paste JavaScript Code</li><li data-tab="upload" class="tab-nav-item">Upload Javascript Files</li><li data-tab="output" class="tab-nav-item">Result</li></ul><div class="checkbox_animated-marker right inlineblock"> <input type="checkbox" id="checkbox_with-marker-1" class="use-ecmascript-next checkbox_input"> <label for="checkbox_with-marker-1" class="use-ecmascript-next-label checkbox_label"> <span class="checkbox_label-content">ECMAScript 2018 (via Babili)</span> <span class="checkbox_marker"> <span class="checkbox_marker_short-line"></span> <span class="checkbox_marker_long-line"></span> </span> </label></div><div class="tab"><div class="tab-pane" id="copyPaste"> <output class="error"></output><form class="copypasteform" name="copyPasteForm"><textarea name="code" placeholder="Type something.."></textarea><button class="button" type="submit">Compress JavaScript</button></form></div><div class="tab-pane hide" id="upload"> <output class="error"></output><div class="file-wrapper"> <input type="file" multiple id="file-input" class="file-input"><label for="file-input" class="file-label">Choose files</label> or drag them here.<div class="buttons"> <button class="button compress">Compress</button> <button class="button clear">Remove all</button></div><div class="file-list"> <div class="no-files"></div></div></div></div><div class="tab-pane hide" id="output"><textarea class="output-code" readonly></textarea><a class="button download">Download</a> Status: <output class="compression"></output> compression, saving <output class="saving"></output></div></div></div></div></div>
<script type="text/javascript">
//<![CDATA[
var jsmodal=document.getElementById('js-compress'),btn=document.getElementById("show-minifier"),span=document.getElementsByClassName("js-compress-close")[0];btn.onclick=function(){jsmodal.style.display="block"}
span.onclick=function(){jsmodal.style.display="none"}
window.onclick=function(event){if(event.target==jsmodal){jsmodal.style.display="none"}}
//]]>
</script>
<script src="https://rawcdn.githack.com/agiltriono/agiel-for-js/dceb05dacd23762fd5e83d71effe3030642e82f4/js-compress/main.js" type="text/javascript"></script>

Masalah nya kode di atas cuma menghasilkan tombol untuk membuka jendela tools , jadi kita butuh kata-kata untuk memberitahu pengunjung cara memakainya.
jadi kita tambahkan tutorial dan informasi pada halaman tersebut. Salin kode di bawah.

<blockquote><h4>Apa itu Gzip ?</h4><br/>gzip digunakan pertama kali bersama System Operasi Unix dan GNU Linux. Gzip dikembangkan pertama kali nya bertujuan untuk mengkompresi isi berkas atau data serta kode sumber pada situs web dengan format karakter khusus serta algoritma tertentu yang dikenal dengan sebutan deflate.<br/><br/><b><i>"Wikipedia : https://en.wikipedia.org/wiki/Gzip"</i></b></blockquote>

<h4>Cara Penggunaan:</h4>

1.<b>Menyalin kode javascript atau Mengetik Kode kode javascript</b>
Tulis kode javascript pada kolom teks yang di sediakan dan perhatikan cara penulisan dengan benar dan teliti jika tidak maka keluar error hindari penulisan tanpa tag penutup pada function dan kurangi penggunaan 
titik koma setelah tag penutup pada function terkecuali variable.

Anda juga dapat menyalin kode javascript ke kolom Teks.
cara menyalin kode :
<ul>
<li>Klik tombol <b>Buka Tools</b>.</li>
<li>pilih <b>Copy & Paste JavaScript Code</b>.</li>
</ul>

2.<b>Mengunggah berkas dari komputer</b>
File unggahan harus berbentuk file javascript atau jquery dengan ekstensi <b>.js</b>. Pastikan berkas yang hendak di unggah tidak mengandung kode html.
cara mengunggah berkas :
<ul>
<li>Klik tombol <b>Buka Tools</b>.</li>
<li>pilih <b>Upload Javascript Files</b>.</li>
<li>klik <b>Choose Files</b>.</li>
<li>pada penjelajah berkas cari file javascript yang ingin anda kompres lalu klik <b>open</b> atau seret file tersebut ke bagian kotak unggahan.</li>
<li>lalu klik tombol <b>Compress</b>.</li>
</ul>
2.1.<b>Menghapus file pada table</b>
Disini anda dapat menghapus file yang sudah di unggah pada table berkas. Namun tidak menghapus kode yang terkompres.
Tapi jangan khawatir kode yang terkompres pada tab <b>Result</b> otomatis diganti dengan value yang baru.
cara menghapus berkas pada table unggahan :
<ul>
<li>Klik tombol <b>Buka Tools</b>.</li>
<li>pilih <b>Upload Javascript Files</b>.</li>
<li>pada daftar berkas click <b>remove</b> untuk menghapus berkas tertentu.</li>
<li>atau klik tombol <b>Remove all</b> untuk menghapus semua berkas.</li>
</ul>

<blockquote>NOTE : Anda dapat mengunggah beberapa file dengan satu klik pada tombol <b>Choose File</b></blockquote>

Cara mengunggah banyak file :
<ul>
<li>Klik tombol <b>Buka Tools</b>.</li>
<li>pilih <b>Upload Javascript Files</b>.</li>
<li>klik <b>Choose Files</b>.</li>
<li>pada penjelajah berkas cari file javascript yang ingin anda kompres lalu pilih semua file tersebut lalu klik <b>open</b> atau seret file tersebut ke bagian kotak unggahan.</li>
<li>lalu klik tombol <b>Compress</b>.</li>
</ul>

jadi kode di atas anda salin pada bagian atas dari kode yang sebelumnya sudah anda salin.

Sebelum klik PUBLISH atau menyimpan pastikan anda sudah mengetik deskripsi halaman seperti di atas dan memasukan meta deskripsi halaman dengan benar agar pengunjung tidak sembarangan memasuki halaman yang tidak di ketahui informasi nya !

jika sudah klik Publish. maka anda dapat melihat langsung hasil nya dengan melihat preview secara langsung
atau klik tombol di bawah ini melihat bentuk halaman yang sudah jadi.

RESULT

apabila merasa ada yang kurang dan perlu penambahan style atau kurang efektif.
silahkan tinggalkan komentar anda pada komentar Disqus.

Apabila ada kata-kata di artikel ini yang kurang tepat di hati anda saya mohon maaf. Terima Kasih

Go to Link