Cara Memasang Tool Css Minifier Di Halaman Statis Blogger

Cara Memasang Tool CSS Minifier di Halaman Statis Blogger - Pada kesempatan kali ini akan mengembangkan sebuah tools yang mempunyai kegunaan untuk mengkompres arahan CSS, dengan mengkompres arahan CSS di dalam template otomatis kita dapat mempercepat loading blog dan itu akan sangat baik untuk mendukung SEO blog. Dan juga tools ini akan membantu teman yang hobi memodifikasi template blogger. Oke pribadi saja, berikut cara menambahkannya.

Cara Memasang Tool CSS Minifier di Laman Statis Blogger

1. Buka Blogger > Buat postingan gres di halaman statis > Kemudian tambahkan arahan di bawah ini di tab HTML (Bukan 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>

Sesuaikan kembali tampilan lewat arahan CSS di atas sesuai keinginan

2. Publish postingan dan lihat hasilnya.

Result

Demikian Cara Memasang Tool CSS Minifier di Halaman Statis Blogger, salam blogger.

Tweet

Subscribe to receive free email updates: