Cara Membuat Tool CSS Minifier di Halaman Statis Blogger - Bahry Logger

Friday, October 5, 2018

Cara Membuat Tool CSS Minifier di Halaman Statis Blogger

Cara Membuat Tool CSS Minifier di Halaman Statis Blogger - Pada kesempatan kali ini kita akan membuat tool untuk mengkompress kode CSS yang ada di blog, fungsi tool ini berguna agar loading di blog jadi lebih cepat blog yang memiliki loading cepat sangat disukai pembaca.


Cara Memasang Tool


Tool yang Jaka akan bagikan ada 3 Style / Model 

1. Buka Blogger > Halaman baru lalu masukkan Kode berikut dalam mode HTML (Bukan Compose)

Style 1


<div id="cssminifier"><style scoped="" type="text/css">
#outer-wrapper {margin:0 auto;text-align:left;float:none;background-position:center!important;} 
#post-wrapper {width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important;} 
.post-body,.post{background-position:center!important;} 
.post-body p{margin:0} #blog1,#artikel,.blog-posts{background-position:center!important;} 
#comments,#sidebar-wrapper,#menu-wrap {display:none;margin-top:0;margin:0;} 
#main-wrapper{padding:0;width:100%;border:0} #cssminifier{background:#ecf0f1;position:relative;display:block;clear:both;border-radius:5px;padding:20px} 
#cssminifier textarea{width:100%;height:240px;margin:0 auto;display:block;background-color:#fff;padding:20px;font-family:Monospace;font-size:13px;border:0;border-radius:5px 5px 0 0;resize:none;box-shadow:inset 0 3px #cdd1d2} textarea:focus{background-color:#fff;color:#303030} 
#cssminifier .box{margin:10px auto 30px;color:#fff;font-size:90%} 
#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{float:none;background:#4d6a79;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,.3);text-align:center;color:#fff;display:inline-block;padding:8px 16px;font-size:13px;font-weight:400;line-height:1.471;border-radius:99em;margin:0 5px;border:0;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1);transition:all .3s} 
#cssminifier button:hover,#cssminifier button:active{background:rgba(255,255,255,.5);color:#fff;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)} #cssminifier button[disabled],#cssminifier button[disabled]:active{background:rgba(255,255,255,.5);color:#fff;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)} 
#cssminifier .opt1,#cssminifier .opt2,#cssminifier .opt3,#cssminifier .opt4,#cssminifier .opt5{display:inline-block;margin:0 3px 0 10px;vertical-align:middle;border:none;outline:none} 
#cssminifier br{display:none} .option-input{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;position:relative;right:0;bottom:0;left:0;height:16px;width:16px;transition:all 0.15s ease-out 0s;background:rgba(255,255,255,.3);border:0;color:#fff;cursor:pointer;display:inline-block;margin-right:0.5rem;outline:none;position:relative;border-radius:99em} .option-input:hover{background:rgba(255,255,255,.3)} .option-input:checked{background:rgba(0,0,0,.2);animation:rubberBand 1s} .option-input:checked::before{height:16px;width:16px;position:absolute;content:'\f00c';font-family:fontawesome;display:inline-block;font-size:12.66667px;text-align:center;line-height:16px} .option-input:checked::after{-webkit-animation:click-wave 0.65s;-moz-animation:click-wave 0.65s;animation:click-wave 0.65s;background:#40e0d0;content:'';display:block;position:relative;z-index:100} .option-input.radio{border-radius:50%} .option-input.radio::after{border-radius:50%} </style><br><br><span class="clear"></span><br><br><textarea autofocus="" id="cssField" placeholder="Paste your CSS code here..." spellcheck="false"></textarea><br><br><div class="button-group"><div class="box"><input class="option-input checkbox opt1" id="stripAllComment" type="checkbox"> <br><br><label for="stripAllComment">Strip all comments</label><br><br><input class="option-input checkbox opt2" id="superCompact" type="checkbox"> <br><br><label for="superCompact">Super compact</label><br><br><input class="option-input checkbox opt3" id="betterIndentation" type="checkbox"> <br><br><label for="betterIndentation">Keep indentation</label><br><br><input checked="" class="option-input checkbox opt4" id="keepLastComma" type="checkbox"> <br><br><label for="keepLastComma">Remove the last semicolon</label></div><button class="ripplelink" onclick="compressCSS(&quot;cssField&quot;);">Compress CSS</button><br><br><button class="ripplelink" onclick="clearField(&quot;cssField&quot;);">Clear Field</button> <br><br><button class="ripplelink" 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>



Style 2


<div class="MsoNormal"><o:p></o:p>
</div><div><span style="font-family: &quot;times new roman&quot; , serif; font-size: 14pt; line-height: 21.4667px;"><br /></span></div><div id="cssminifier"><style scoped="" type="text/css">
#cssminifier{background:#ecf0f1;position:relative;display:block;clear:both;border-radius:5px;padding:10px;border:1px solid rgba(0,0,0,0.05)} 
#cssminifier textarea{width:100%;height:240px;margin:0 auto;display:block;background-color:#fff;padding:10px;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:#e03134;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 5px 5px} #cssminifier button{ display: inline-block; width: 20%; height: 50px; margin-top: 1em; margin-bottom: 6px; cursor: pointer; background: #c10937; color: white; font-family: Oswald ,sans-serif; font-size: 1em; border: none; -webkit-box-shadow: 1px 1px 0 0 #1f7a82,2px 2px 0 0 #1f7a82,3px 3px 0 0 #1f7a82; box-shadow: 1px 1px 0 0 #1f7a82,2px 2px 0 0 #1f7a82,3px 3px 0 0 #1f7a82; -webkit-appearance: none;   -webkit-transition: all 250ms ease; -moz-transition: all 250ms ease; -ms-transition: all 250ms ease; -o-transition: all 250ms ease; transition: all 250ms ease; } 
#cssminifier button:hover{ -webkit-box-shadow: 1px 1px 0 0 #1f7a82,0px 0px 0 0 #1f7a82,0px 0px 0 0 #1f7a82; box-shadow: 1px 1px 0 0 #1f7a82,0px 0px 0 0 #1f7a82,0px 0px 0 0 #1f7a82; margin-top: 22px; margin-left: 2px; margin-bottom: 0px; } 
#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;height:18px;width:18px;content:'\f00c';font-family:fontawesome;} 
#cssminifier br{display: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><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>



Style 3


<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{float:none;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 .3s} #cssminifier button:hover,#cssminifier button:active{background:rgba(255,255,255,0.4);color:#fff} 
#cssminifier button[disabled],#cssminifier button[disabled]:active{background:#fff;} #cssminifier .opt1,#cssminifier .opt2,#cssminifier .opt3,#cssminifier .opt4,#cssminifier .opt5{display:inline-block;margin:0 3px 0 10px;vertical-align:middle;border:none;outline:none} 
#cssminifier br{display:none} .option-input{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;position:relative;right:0;bottom:0;left:0;height:16px;width:16px;transition:all 0.15s ease-out 0s;background:rgba(255,255,255,0.3);border:none;color:#fff;cursor:pointer;display:inline-block;margin-right:0.5rem;outline:none;position:relative;border-radius:10%;} .option-input:hover{background:rgba(255,255,255,0.4)} .option-input:checked{background:rgba(255,255,255,0.3)} .option-input:checked::before{height:16px;width:16px;position:absolute;content:'\f00c';font-family:fontawesome;display:inline-block;font-size:12.66667px;text-align:center;line-height:16px} .option-input:checked::after{-webkit-animation:click-wave 0.65s;-moz-animation:click-wave 0.65s;animation:click-wave 0.65s;background:#40e0d0;content:'';display:block;position:relative;z-index:100} .option-input.radio{border-radius:50%} .option-input.radio::after{border-radius:50%} .content-areapix {width:100%;} .sidebar-widget-areapix {display:none;} </style><br><span class="clear"></span><br><textarea autofocus="" id="cssField" placeholder="Paste your CSS code here..." spellcheck="false"></textarea><br><div class="button-group"><div class="box"><input class="option-input checkbox opt1" id="stripAllComment" type="checkbox"> <br><label for="stripAllComment">Strip all comments</label><br><input class="option-input checkbox opt2" id="superCompact" type="checkbox"> <br><label for="superCompact">Super compact</label><br><input class="option-input checkbox opt3" id="betterIndentation" type="checkbox"> <br><label for="betterIndentation">Keep indentation</label><br><input checked="" class="option-input checkbox opt4" id="keepLastComma" type="checkbox"> <br><label for="keepLastComma">Remove the last semicolon</label><br></div><button class="ripplelink" onclick="compressCSS(&quot;cssField&quot;);">Compress CSS</button><br><button class="ripplelink" onclick="clearField(&quot;cssField&quot;);">Clear Field</button> <br><button class="ripplelink" onclick="selectAll(&quot;cssField&quot;);">Select All</button><br></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>




2. Publish Halaman tersebut.


Akhir Kata

Jika ada menurut kalian ada yang kurang bagus bisa kalian edit sendiri kodenya atau request melalui kolom komentar :D


Subscribe To Our Newsletter

TOP