Cara Memasang Tools CSS Minifier di Blog

CSS Minifier adalah tools yang berfungsi untuk meng-compress kode CSS agar menjadikannya lebih ringan. Tools ini sangat bermanfaat di blog karena dapat mempercepat kecepatan blog. 

Cara kerja toolsnya ini gimana bang? jelasin dong?

Cara kerjanya sangat simple kok, yaitu mengubah kode CSS yang masih bahasa manusia ke dalam bahasa HTML. Atau cara cepatnya, tranlaste. Gunanya tools ini untuk, membuat si template memahami semua kode html dengan cepat. Jadi kalau template sobat masih bahasa manusia seperti font-family, height, width atau dll, si template masih mikir. Beda sama yg udah di tranlasikan. Begitulah kira-kira cara kerja tools ini. 

Tapi untuk kali ini, aku tidak membahas cara mempercepat blognya tapi yang aku bahas kali ini cara membuat toolsnya dulu. Mungkin dilain waktu akan aku bagikan. Jika sobat berminat memasang tools ini, silahkan ikuti panduannya dibawah ini.

Memasang Tools CSS Minifier di Blog

#1. Buka bloggger.
#2. Pilih menu halaman > pilih halaman baru.

#3. Setelah itu ganti dari Compose ke HTML, seperti gambar dibawah  ini.

#4. Kemudian copy kode dibawah dan pastekan didalamnya.

Halaman Ini Berfungsi untuk meng-compress kode CSS di Blog sobat agar penggunaan CSS dalam blog lebih ringan.
<center>
<div id="cssmini">
<style scoped="" type="text/css">
#cssmini{background:#ecf0f1;position:relative;display:block;clear:both;border-radius:5px;padding:20px;border:1px solid rgba(0,0,0,0.05)}
#cssmini 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:#FFF;color:#303030}
#cssmini .box{margin:10px auto 30px;color:rgba(255,2255,255,.6);}
#cssmini .box p{margin:0 0 2px}
#cssmini button{cursor:pointer;}
#cssmini .col{width:48%;margin:0 auto 30px}
#cssmini .left{float:left;margin-left:1%}
#cssmini .right{float:right;margin-right:1%}
#cssmini .button-group{background:#2980b9;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 5px 5px}
#cssmini button,#cssmini button[disabled]:active{background:rgba(255,255,255,0.2);text-align:center;color:#fefefe;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}
#cssmini button:hover,#cssmini button:active{background:#fff;color:#2980b9}
#cssmini button[disabled],#cssmini button[disabled]:active{background:#fff;}
#cssmini .opt1,#cssmini .opt2,#cssmini .opt3,#cssmini .opt4,#cssmini .opt5{display:inline-block;margin:0 0 0 10px;vertical-align:middle;border:none;outline:none}
#cssmini br{display:none}
</style>
<span class="clear"></span>
<textarea autofocus="" id="cssField" placeholder="Letakan Code CSS Anda Disini..." 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>
<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>
<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>
<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];
</script>
</div>
</center>
<br />

#5. Lalu langsung saja klik publikasikan.
#6. Selesai.

Demo

Buat loading blog kamu lebih hidup dengan memasang animasi bergerak lucu caranya : Baca disini.

Mungkin itu aja yang dapat aku bagikan hari ini. Semoga artikel ini dapat membantu sobat dan bermanfaat. Dipersilahkan bagi yang ingin bertanya, silahkan bertanya di kolom komentar. Terima kasih.

Share this post