Cara Memasang Tool Compress CSS di Blogger

Tool Compress CSS-Kali ini saya ingin berbagi Cara Compress CSS tentunya sahabat blogger sudah tidak asing lagi dengan compress css, karena dengan fitur ini kita bisa mempercepat loading blog, begitulah kata google yang saya temui di alamatnya google.com,hehe.. bagi sobat yang ingin mengcopress css atau mengecilkan ukuran css silahkan kunjungi link ini, ini saya ambil dari DTE, bagi sobat yang ingin decompressnya bisa tunggu tutorial berikutnya.

Sebenarnya saya ingin membuat artikel Cara Mempercepat blog, tapi tidak berani hehe takut dicaci maki, karena kecepatan blog ilkomunived masih 76 di ambil tanggal (23/04/2014) yang saya cek melalui testpagespeed. Tapi ada beberapa tips dari mas +hengki kristianto   yang bisa sobat terapkan, saya juga lagi belajar dari sana, berikut tipsnya:

1. Cara Mempercepat Loading Blog dengan Menggunakan CSS Compressor
2. Cara Mempercepat Loading Blog dengan Memperkecil Ukuran Gambar
3. Mempercepat Waktu Loading Blog dengan Meletakkan Script pada akhir editor template
4. Mempercepat Loading Blog dengan tidak mengulangi upload gambar yang sama
5. Meringankan blog dengan menghindarkan iklan yang berlebihan
6. Mempercepat Loading Blog dengan tidak menggunakan background gambar
7. Mempercepat Loading Blog dengan membuang widget tertentu

Masih banya sob silahkan berkunjung ke blognya mas +hengki kristianto untuk lebih lengkap, karena saya bukan ingin share Cara Mempercepat Loading Blog, melainkan ingin share Cara Compress CSS.

Untuk demo bisa dilihat di menu samping bagian tool, Jika sobat ingin memasang tool juga ini silahkan copas kode berikut dan pastekan di laman baru pada bagian HTML bukan COMPOSE:

Code

<style scoped="" type="text/css">
textarea{border:none;width:98%;height:200px;margin:0 auto;display:block;background-color:#F0F0F0;padding:5px;font:normal 12px 'Courier New',Monospace;border:1px solid #ccc}textarea:focus{background-color:#FFF;color:#303030}.box{text-align:left;margin:10px auto 30px}.box p{margin:0 0 2px}button{font:normal bold 12px Arial,Sans-Serif;cursor:pointer;padding:2px 5px}.button-group button{padding:7px 18px}.col{width:48%;margin:0 auto 30px}.left{float:left;margin-left:1%}.right{float:right;margin-right:1%}.button-group{text-align:center;border:1px dashed #bbb;padding:15px 20px 30px;margin:0 0 10px}button,button[disabled]:active{text-align:center;color:#fff;display:inline-block;white-space:nowrap;background-color:#00aaff;background:linear-gradient(#00aaff,#0994d9);border-radius:2px 2px 2px 2px;cursor:pointer;font-family:'Open Sans',Arial,Sans-Serif;font-size:13px;padding:3px 8px 1px;position:relative;text-shadow:0 1px 0 rgba(0,0,0,0.3);top:-1px;transition:none 0s ease 0s;border:1px solid #888;box-shadow:inset 0 1px 0 rgba(255,255,255,0.3),0px 1px 2px #bbb}button:active{background:linear-gradient(#0994d9,#00aaff)}button[disabled],button[disabled]:active{background:#00aaff;top:0;box-shadow:inset 0 2px 0 rgba(255,255,255,0)}.opt1,.opt2,.opt3,.opt4,.opt5{display:inline-block;margin:0 10px 0 0;vertical-align:middle;border:none;outline:none}
</style>
<span class="clear"></span>
<textarea autofocus="" id="cssField" placeholder="Paste your CSS code here..." spellcheck="false"></textarea>
<br />
<div class="button-group">
<div class="box">
<input class="opt1" id="stripAllComment" type="checkbox" /> 
<label for="stripAllComment">Strip all comments</label>
<br />
<input class="opt2" id="superCompact" type="checkbox" /> 
<label for="superCompact">Super compact</label>
<br />
<input class="opt3" id="betterIndentation" type="checkbox" /> 
<label for="betterIndentation">Keep indentation inside <code>@query {}</code></label>
<br />
<input checked="" class="opt4" id="keepLastComma" type="checkbox" /> 
<label for="keepLastComma">Remove the last semicolon</label>
</div>
<button onclick="compressCSS(&quot;cssField&quot;);">Compress CSS</button>
<button onclick="clearField(&quot;cssField&quot;);">Clear Field</button> 
<button onclick="selectAll(&quot;cssField&quot;);">Select All</button>
</div>
<div class="clear">
</div>
<br />

<script type="text/javascript">
function get(id) {
 return document.getElementById(id);
}

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];

/* Syntax Highlighter */
function highlightCode(el) {
 if (hc.checked) {
  var t = el.innerHTML;
  t = t.replace(/\{([\s\S]+?)\}/g, function(m) {
   return m.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'>");
  });
  t = t.replace(/&lt;(.*?)('|")(.*?)('|")&gt;/g, function(m) {
   return m.replace(/'(.*?)'/g, "<span class='vl'>\'$1\'</span>").replace(/"(.*?)"/g, "<span class='vl'>\"$1\"</span>")
  });
  t = t.replace(/\{([\s\S]+?)\}/g, function(m) {
   return m.replace(/([\(\)\{\}\[\]\:\;\,]+)/g, "<span class='pn'>$1</span>").replace(/\!important/ig, "<span class='im'>!important</span>");
  });
  t = t.replace(/\/\*([\w\W]+?)\*\//gm, "<span class='cm'>/*$1*/</span>");
  el.innerHTML = '<code>' + t + '</code>';
  hr.style.display = "block";
  rt.style.display = "block";
 } else {
  hr.style.display = "none";
  rt.style.display = "none";
 }
}

/* CSS Compressor */
function compressCSS(id) {
 var cf = get(id),
  iq = /@(media|-w|-m|-o|keyframes|page)(.*?)\{([\s\S]+?)?\}\}/ig,
  v = cf.value,
  ln = v.length;
 v = (sa.checked || sc.checked) ? v.replace(/\/\*[\w\W]*?\*\//gm, "") : v.replace(/(\n+)?(\/\*[\w\W]*?\*\/)(\n+)?/gm, "\n$2\n");
 v = v.replace(/([\n\r\t\s ]+)?([\,\:\;\{\}]+?)([\n\r\t\s ]+)?/g, "$2");
 v = (sc.checked) ? v : v.replace(/\}(?!\})/g, "}\n");
 v = (bi.checked) ? v.replace(iq, function(m) {
  return m.replace(/\n+/g, "\n  ");
 }) : v.replace(iq, function(m) {
  return m.replace(/\n+/g, "");
 });
 v = (bi.checked && !sc.checked) ? v.replace(/\}\}/g, "}\n}") : v;
 v = (bi.checked && !sc.checked) ? v.replace(/@(media|-w|-m|-o|keyframes)(.*?)\{/g, "@$1$2{\n  ") : v;
 v = (cm.checked) ? v.replace(/;\}/g, "}") : v.replace(/\}/g,";}").replace(/;+\}/g,";}").replace(/\};\}/g,"}}");
 v = v.replace(/\:0(px|em|pt)/ig, ":0");
 v = v.replace(/ 0(px|em|pt)/ig, " 0");
 //v = v.replace(/ +?(\>|\+|\~) +?/g,"$1");
 v = v.replace(/\s+\!important/ig, "!important");
 v = v.replace(/(^\n+|\n+$)/, "");
 cf.value = v;
 hr.innerHTML = '\/\* ' + (ln - v.length) + ' of ' + ln + ' unused characters has been removed. \*\/\n' + v.replace(/</g, "&lt;").replace(/>/g, "&gt;");
 highlightCode(hr);
}

/* Clear the field value */
function clearField(id) {
 var fl = get(id);
 fl.value = "";
 fl.focus();
}

/* Select All */
function selectAll(id) {
 get(id).focus();
 get(id).select();
}
</script>

Silahkan coba sob biar nanti kalau ada yang mau di compress bisa menggunakan tool kita sendiri, tapi kalau ingin compress hutang, tool ini tidak bisa digunakan hehe... Sekian tutorial saya malam ini, untuk yang lagi blogwalking silahkan coret-coret agar saya bisa coret balik, terima kasih sob sudah membaca tutorial artikel Cara Memasng Tool Compress CSS di Blogger, happy blogging...