Memasang Tool CSS Minifier di Halaman Statis Blogger

Di kesempatan kali ini kita akan membahas sebuah Tools yang sangat memiliki kegunaan bagi kecepatan loading pada blog yaitu Tools CSS Minifer. Tools CSS Minifer ini sangat disarankan untuk digunakan untuk mengkompres isyarat CSS yang terpasang pada templated blog yang kita gunakan. 

Seperti yang sudah pernah kita bahas sebelumnya salah satu faktor pendukung SEO pada blog ialah kecepatan pada loading blog itu sendiri, ada banyak bahwasanya faktor yang mensugesti loading blog salah satunya ialah isyarat CSS yang terpasang ini. Nah untuk memudahkan sahabat mengkompres isyarat CSS yang akan di pasang pada template blognya berikut kita bahas Cara Memasang Tool CSS Minifier di Halaman Statis Blogger.

Bagi sahabat yang mau mencoba memasangnya mari kita simak bersama langkahnya berikut ini.

Langkah Pertama 

Silahkan sahabat buat postingan gres di halaman statis beri judul Tool CSS Minifier lalu silahkan sahabat salin isyarat HTML dibawah ini dan letakkan pada lembar kerja tab HTML ingat ya bukan di tab Compose.

<div id="cssminifier"> <style scoped="" type="text/css"> #cssminifier{background:#ecf0f1;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:#FFF;color:#303030} #cssminifier .box{margin:10px auto 30px;color:rgba(255,2255,255,.6);} #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:#2980b9;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,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} #cssminifier button:hover,#cssminifier button:active{background:#fff;color:#2980b9} #cssminifier button[disabled],#cssminifier button[disabled]:active{background:#fff;} #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> <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>

Langkah Ke Dua
Setelah isyarat terpasang silahkan sahabat Pratinjau terlebih dahulu jikalau dirasa sudah sesuai dengan petunjuk diatas silahkan sahabat SAVE dan Publish Halaman Tool CSS Minifier dan SELESAI selamat mencoba.

Result