Cara membuat CSS Compressor

bagi pemilik website, melakukan minify pada CSS atau Javascript adalah hal yang opsional. akan tetapi jika pemilik website itu ingin membuat loading website lebih cepat, maka metode minify ini sangat dianjurkan, dengan menggunakan minify sekaligus menjadi keamanan sendiri ketika orang lain melihat code template kita. dan juga dengan menggunakan metode ini setidaknya akan meningkatkan kecepatan web menjadi 10% dari sebelumnya.

ok langsung saja ke tahap pembuatannya, caranya kita buat Pages baru atau Posts Baru.
kalau saya pribadi membuat di Pages karena halaman statis,.

jika sudah pilih New Post atau Pages. kemudian Pilih mode HTML jangan compose. masukan Kode berikut lalu publish.

<div id="cssminifier">
<style scoped="" type="text/css">
#cssminifier{background:#2d6542;position:relative;display:block;clear:both;border-radius:5px;padding:20px;border:1px solid rgba(0,0,0,0.05)}#cssminifier textarea{width:100%;height:240px;margin:0 auto;display:block;background-color:#fff;padding:20px;font:normal 13px 'Courier New',Monospace;border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);border-radius:5px 5px 0 0;resize:none}textarea:focus{background-color:#b8d2d5;color:#303030}#cssminifier .box{margin:10px auto 30px;color:#303437}#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{background:#2d6542;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 5px 5px}#cssminifier button,#cssminifier button[disabled]:active{background:rgba(132,179,231);text-align:center;color:#2d6542;display:inline-block;padding:6px 12px;font-size:14px;font-weight:400;line-height:1.471;border-radius:4px;margin:0 5px;border:0;transition:all .1s}#cssminifier button:hover,#cssminifier button:active{background:#85c6cc;color:#2980b9}#cssminifier button[disabled],#cssminifier button[disabled]:active{background:#2d6542}#cssminifier .opt1,#cssminifier .opt2,#cssminifier .opt3,#cssminifier .opt4,#cssminifier .opt5{display:inline-block;margin:0 0 0 10px;vertical-align:middle;border:none;outline:none}#cssminifier br{display:none}</style> <span class="clear"></span> <textarea autofocus="" id="cssField" placeholder="Paste your CSS code here..." spellcheck="false"></textarea> <div class="button-group">
<div class="box">
<input class="opt1" id="stripAllComment" type="checkbox" />  <label for="stripAllComment">Strip all comments</label> <input class="opt2" id="superCompact" type="checkbox" />  <label for="superCompact">Super compact</label> <input class="opt3" id="betterIndentation" type="checkbox" />  <label for="betterIndentation">Keep indentation</label> <input checked="" class="opt4" id="keepLastComma" type="checkbox" />  <label for="keepLastComma">Remove the last semicolon</label> </div>
</div>
<button class="ripple" onclick="compressCSS(&quot;cssField&quot;);">Compress CSS</button> <button class="ripple" onclick="clearField(&quot;cssField&quot;);">Clear Field</button>  <button onclick="selectAll(&quot;cssField&quot;);">Select All</button><button onclick="myFunction()">Uncompress Css</button> </div>
<script type='text/javascript'>
//<![CDATA[
document.write(unescape('%3C%63%65%6E%74%65%72%3E%0A%3C%62%72%20%2F%3E%20%20%20%20%20%20%20%20%20%20%0A%3C%62%72%20%2F%3E%0A%4F%52%49%47%49%4E%41%4C%20%43%52%45%41%54%45%44%20%A9%20%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%61%6B%6D%61%64%6E%75%64%69%6E%2E%63%6F%6D%22%3E%41%4B%4D%41%44%20%4E%55%44%49%4E%20%49%6E%63%3C%2F%61%3E%3C%2F%63%65%6E%74%65%72%3E'));//]]>
</script>
<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'></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="\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];</script>
<script>
function alertWithoutNotice(myFunction){
    setTimeout(function(){
        alert(confirm);
    }, 1000);
}
function myFunction() {
    var x;
    if (confirm("Yakin kamu ingin meninggalkan Aku...?jika iya press ok") == true) {
        x = "You pressed OK!";
window.location.href = "/p/unminifier-css.html";
    } else {
        x = "You pressed Cancel!";
    }
}
</script> </div>