Cara Membuat Halaman CSS Minifier di Blog

CSS minifier/Minify adalah tools yang berguna untuk mengkompress kode CSS agar ukurannya menjadi lebih kecil. Tidak perlu menggunakan tools dari pihka ketiga, kamu bisa membuat halaman CSS minifier kamu sendiri di blog.

Kecepatan (pagespeed) adalah faktor penting yang harus dimiliki oleh sebuah website. Semakin cepat diakses, semakin banyak pula efek positif yang bisa didapat oleh sebuah blog.

Salah satu cara untuk mempercepat loading blog adalah dengan mengkompress file CSS. File CSS sendiri merupakan singkatan dari Cascading Style Sheets yang fungsinya mengatur tampilan masing-masing elemen HTML agar tampak baik saat muncul di layar pengunjung.

Untuk memperkecil ukuran CSS, saat ini ada banyak tools kompresi CSS online seperti CSS Minifier, CSS Compressor, Minifier.org, Clean CSS, dan masih banyak lagi. Cukup salin kode CSS, maka situs-situs tersebut akan menghapus beberapa bagian tidak penting sehingga saat disimpan ukurannya akan menjadi semakin kecil.

Uniknya, kamu bisa membuat sendiri halaman CSS Minifier pada blog agar kamu tidak perlu bolak-balik ke situs lain hanya untuk mengkompresi file CSS. Hasilnya pun tidak kalah bagus dibanding tools online lainnya.

Cara Memasang Tools CSS Minifier di Blog

Untuk membuat halaman CSS Minify/Minifier kamu sendiri, kamu hanya perlu menyalin kode berikut ini pada halaman baru di Blogger atau WordPress.

<div dir="ltr" style="text-align: left;" trbidi="on">
    <div id="cssminifier">
       <style scoped="" type="text/css">.night-mode #cssminifier .button-group{float:none;background:#444852;} .night-mode #cssminifier textarea{background-color:#202442;box-shadow:inset 0 3px #202442;color: white;} .night-mode #cssminifier{background:#2d3158;} #outer-wrapper {margin:0 auto;text-align:left;float:none;background-position:center!important;} #post-wrapper {width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important;} .post-body,.post{background-position:center!important;} .post-body p{margin:0} #blog1,#artikel,.blog-posts{background-position:center!important;} #comments,#sidebar-wrapper,#menu-wrap {display:none;margin-top:0;margin:0;} #main-wrapper{padding:0;width:100%;border:0} #cssminifier{background:#ecf0f1;position:relative;display:block;clear:both;border-radius:5px;padding:20px} #cssminifier textarea{width:100%;height:240px;margin:0 auto;display:block;background-color:#fff;padding:20px;font-family:Monospace;font-size:13px;border:0;border-radius:5px 5px 0 0;resize:none;box-shadow:inset 0 3px #cdd1d2} textarea:focus{background-color:#fff;color:#303030} #cssminifier .box{margin:10px auto 30px;color:#fff;font-size:90%} #cssminifier .box p{margin:0 0 2px} #cssminifier button{cursor:pointer;} #cssminifier .col{width:48%;margin:0 auto 30px} #cssminifier .left{float:left;margin-left:1%} #cssminifier .right{float:right;margin-right:1%} #cssminifier .button-group{float:none;background:#4d6a79;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 5px 5px} #cssminifier button,#cssminifier button[disabled]:active{background:rgba(255,255,255,.3);text-align:center;color:#fff;display:inline-block;padding:8px 16px;font-size:13px;font-weight:400;line-height:1.471;border-radius:99em;margin:1em 5px;border:0;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1);transition:all .3s} #cssminifier button:hover,#cssminifier button:active{background:rgba(255,255,255,.5);color:#fff;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)} #cssminifier button[disabled],#cssminifier button[disabled]:active{background:rgba(255,255,255,.5);color:#fff;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)} #cssminifier .opt1,#cssminifier .opt2,#cssminifier .opt3,#cssminifier .opt4,#cssminifier .opt5{display:inline-block;margin:0 3px 0 10px;vertical-align:middle;border:none;outline:none} #cssminifier br{display:none} .option-input{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;position:relative;right:0;bottom:0;left:0;height:16px;width:16px;transition:all 0.15s ease-out 0s;background:rgba(255,255,255,.3);border:0;color:#fff;cursor:pointer;display:inline-block;margin-right:0.5rem;outline:none;position:relative;border-radius:99em} .option-input:hover{background:rgba(255,255,255,.3)} .option-input:checked{background:rgba(0,0,0,.2);animation:rubberBand 1s} .option-input:checked::before{height:16px;width:16px;position:absolute;content:'\2713';display:inline-block;font-size:12.66667px;text-align:center;line-height:16px} .option-input:checked::after{-webkit-animation:click-wave 0.65s;-moz-animation:click-wave 0.65s;animation:click-wave 0.65s;background:#40e0d0;content:'';display:block;position:relative;z-index:100} .option-input.radio{border-radius:50%} .option-input.radio::after{border-radius:50%} .flex{display: flex;display: -webkit-flex;display: -moz-flex;align-items: center;-webkit-align-items: center;-moz-align-items: center;justify-content: space-around;-webkit-justify-content: space-around;-moz-justify-content: space-around;margin-bottom: 3em;flex-wrap: wrap;-webkit-flex-wrap: wrap }</style>
       <br />
       <span class="clear"></span><br />
       <textarea autofocus="" id="cssField" placeholder="Salin kode CSS di sini ..."></textarea>
       <br />
       <div class="button-group">
          <div class="box">
             <input class="option-input checkbox opt1" id="stripAllComment" type="checkbox" /> <br />
             <label> Strip all comments</label><br />
             <input class="option-input checkbox opt2" id="superCompact" type="checkbox" /> <br />
             <label> Super compact</label><br />
             <input class="option-input checkbox opt3" id="betterIndentation" type="checkbox" /> <br />
             <label> Keep indentation</label><br />
             <input checked="" class="option-input checkbox opt4" id="keepLastComma" type="checkbox" /> <br />
             <label> Remove the last semicolon</label>
          </div>
          <div class="flex">
          <button class="ripplelink" onclick="compressCSS(&quot;cssField&quot;);">Compress CSS</button><br />
          <button class="ripplelink" onclick="clearField(&quot;cssField&quot;);">Clear Field</button> <br />
          <button class="ripplelink" onclick="selectAll(&quot;cssField&quot;);">Select All</button> <br />
          <button class="ripplelink" onclick="copyAll(&quot;cssField&quot;);">Copy to Clipboard</button>
          </div>
       </div>
       <div class="clear">
       </div>
       <script type="text/javascript">function get(e){return document.getElementById(e)}function highlightCode(e){if(hc.checked){var a=e.innerHTML;a=a.replace(/\{([\s\S]+?)\}/g,function(e){return e.replace(/\'(.*?)\'/g,"<span class='st'>'$1'</span>").replace(/\"(.*?)\"/g,"<span class='st'>\"$1\"</span>").replace(/(\{|\n|;)?(.[^\{]*?):(.[^\{]*?)(;|\})/g,"$1<span class='pr'>$2</span>:<span class='vl'>$3</span>$4").replace(/<span class='pr'>\{/g,"{<span class='pr'>")}),a=a.replace(/&lt;(.*?)('|")(.*?)('|")&gt;/g,function(e){return e.replace(/'(.*?)'/g,"<span class='vl'>'$1'</span>").replace(/"(.*?)"/g,"<span class='vl'>\"$1\"</span>")}),a=a.replace(/\{([\s\S]+?)\}/g,function(e){return e.replace(/([\(\)\{\}\[\]\:\;\,]+)/g,"<span class='pn'>$1</span>").replace(/\!important/gi,"<span class='im'>!important</span>")}),a=a.replace(/\/\*([\w\W]+?)\*\//gm,"<span class='cm'>/*$1*/</span>"),e.innerHTML="<code>"+a+"</code>",hr.style.display="block",rt.style.display="block"}else hr.style.display="none",rt.style.display="none"}function compressCSS(e){var a=get(e),c=/@(media|-w|-m|-o|keyframes|page)(.*?)\{([\s\S]+?)?\}\}/gi,n=a.value,t=n.length;n=sa.checked||sc.checked?n.replace(/\/\*[\w\W]*?\*\//gm,""):n.replace(/(\n+)?(\/\*[\w\W]*?\*\/)(\n+)?/gm,"\n$2\n"),n=n.replace(/([\n\r\t\s ]+)?([\,\:\;\{\}]+?)([\n\r\t\s ]+)?/g,"$2"),n=sc.checked?n:n.replace(/\}(?!\})/g,"}\n"),n=bi.checked?n.replace(c,function(e){return e.replace(/\n+/g,"\n  ")}):n.replace(c,function(e){return e.replace(/\n+/g,"")}),n=bi.checked&&!sc.checked?n.replace(/\}\}/g,"}\n}"):n,n=bi.checked&&!sc.checked?n.replace(/@(media|-w|-m|-o|keyframes)(.*?)\{/g,"@$1$2{\n  "):n,n=cm.checked?n.replace(/;\}/g,"}"):n.replace(/\}/g,";}").replace(/;+\}/g,";}").replace(/\};\}/g,"}}"),n=n.replace(/\:0(px|em|pt)/gi,":0"),n=n.replace(/ 0(px|em|pt)/gi," 0"),n=n.replace(/\s+\!important/gi,"!important"),n=n.replace(/(^\n+|\n+$)/,""),a.value=n,hr.innerHTML="/* "+(t-n.length)+" of "+t+" unused characters has been removed. */\n"+n.replace(/</g,"&lt;").replace(/>/g,"&gt;"),highlightCode(hr)}function clearField(e){var a=get(e);a.value="",a.focus()}function selectAll(e){get(e).focus(),get(e).select()}var hc=get("highlightCode"),sa=get("stripAllComment"),sc=get("superCompact"),cm=get("keepLastComma"),bi=get("betterIndentation"),bs=get("breakSelector"),tt=get("toTab"),to=get("tabOpt").getElementsByTagName("input"),sb=get("spaceBetween"),ip=get("inlineSingleProp"),rs=get("removeLastSemicolon"),il=get("inlineLayout"),si=get("singleBreak"),hr=get("highlightedResult"),rt=document.getElementsByTagName("h2")[1];function copyAll(){var e=document.getElementById("cssField");e.select(),e.setSelectionRange(0,99999),document.execCommand("copy"),alert("Copied the text: "+e.value)}</script><br />
    </div>
 </div>

1. Cara Membuat Halaman CSS Minifier di Blogspot

• Login ke dasbor Blogger
• Buat halaman baru dengan memilih menu PAGE ► NEW PAGE
• Beri judul halaman yang sesuai seperti CSS Minifier atau semacamnya
• Ubah editor teks menjadi HTML lalu salin di atas. Jika terdapat error saat akan disimpan, klik saja tautan DISMISS/ABAIKAN. Simpan!

2. Cara Membuat Halaman CSS Minifier di WordPress

• Login ke dasbor WordPress
• Buat halaman baru melalui menu PAGES ► ADD NEW
• Beri judul halaman yang sesuai seperti CSS Minifier atau semacamnya
• Tambah block HTML lalu salin kode di atas. Jika sudah, simpan!

Bagaimana Cara Kerja CSS Minifier?

Secara singkat, CSS Minifier bekerja dengan cara menghapus beberapa bagian yang tidak perlu tanpa merusak fungsi kode CSS itu sendiri. Sebagai contoh, komentar, spasi, indent, serta semicolon terakhir dapat dihapus tanpa khawatir membuat kode CSS tidak bekerja. Dengan begitu, kode semacam ini

/*Mengatur tampilan blog*/
body {
  background: #f7f7f7;
  padding: 40px 20px;
}

dapat di-minify menjadi seperti berikut ini,

body {background:#f7f7f7;padding:40px 20px}

Lalu bagaimana Kinerja Script Ini Dibanding Tools CSS Minifier Lainnya?

Saat ini sudah ada banyak tools CSS minifier gratis yang bisa dengan mudah kita temukan. Jika script yang kita pakai di atas menghasilkan file yang masih kalah kecil, rasanya lebih baik memakai tools lain saja bukan?

Karena penasaran, saya coba membandingkan hasil kompresi semua tools tersebut dengan script di atas. Hasilnya? ternyata tidak terlalu mengecewakan!