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, dan Hari ini saya akan berbagi Bagimana Cara Memasang Tools CSS Minifier di Blog.

Tools ini akan dipasang di halaman Statis dan tenang Tools ini tidak terlalu memberatkan Blog kalian.

Untuk Demo dari Tools ini, bisa kalian lihat secara Live disini, tinggal klik Tombol Demo dibawah

DEMO

Sudah lihat ? Tertarik untuk memasangnya ke Blog kalian ? Silahkan lihat dibawah

Memasang Tools CSS Minifier di Blog

1.Buka Blogger
2.Setelah itu buat Laman Baru dan ganti dari Compose ke HTML, seperti gambar dibawah

3.Setelah itu copy kode dibawah dan letakan disana

Hakaman Ini Berfungsi untuk meng-compress kode CSS di Blog anda agar Blog lebih ringan<br />
<br />
<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 />
<marquee>
Special Thanks : <a href="http://www.arlinadzgn.com/" target="_blank" title="ArlinaDzgn">ArlinaDzgn</a>
</marquee>

4.Lalu langsung saja Save/Publikasikan

Silahkan kalian cek blog kalian masing masing.

Saya berpesan kepada kalian, tolong jangan HILANGKAN tulisan Special Thanks : ArlinaDzgn, karena dialah yang telah membuat Tools ini

Special Thanks buat ArlinaDzgn yang telah membuat Tools ini

Cukup sekian dari post ini,semoga dapat menambah informasi bagi anda.