Skip to content Skip to sidebar Skip to footer
How to Create CSS Minifier Pages on Blog

How to Create CSS Minifier Pages on Blog

- - Post a Comment


CSS minifier/Minify is a useful tool for compressing CSS code to make it smaller in size. No need to use tools from a third party, you can create your own CSS minifier page on the blog.

Speed (pagespeed) is an important factor that must be owned by a website. The faster it is accessed, the more positive effects a blog can have.

One way to speed up loading a blog is to compress CSS files. CSS file itself stands for Cascading Style Sheets whose function is to adjust the appearance of each HTML element so that it looks good when it appears on the visitor's screen.

To reduce the size of CSS, currently there are many online CSS compression tools such as CSS Minifier, CSS Compressor, Minifier.org, Clean CSS, and many more. Just copy the CSS code, then these sites will remove some unimportant parts so that when they are saved they will get smaller in size.

Uniquely, you can create your own CSS Minifier page on your blog so you don't have to go back and forth to other sites just to compress CSS files. The results are no less good than other online tools.

How to Install CSS Minifier Tools on Blog

To create your own CSS Minify/Minifier page, you just need to copy the following code on a new page in Blogger or WordPress.

<div dir="ltr" style="text-align: left;" trbidi="on">
  <div id="cssminifier">
      <style scoped="" type="text/css">.night-mode #cssminifier .button-group{float:none;background:#444852;} .night-mode #cssminifier textarea{background-color:#202442;box-shadow:inset 0 3px #202442;color: white;} .night-mode #cssminifier{background:#2d3158;} #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:1em 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:'\2713';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%} .flex{display: flex;display: -webkit-flex;display: -moz-flex;align-items: center;-webkit-align-items: center;-moz-align-items: center;justify-content: space-around;-webkit-justify-content: space-around;-moz-justify-content: space-around;margin-bottom: 3em;flex-wrap: wrap;-webkit-flex-wrap: wrap }</style>
      <br />
      <span class="clear"></span><br />
      <textarea autofocus="" id="cssField" placeholder="Salin kode CSS di sini ..."></textarea>
      <br />
      <div class="button-group">
        <div class="box">
            <input class="option-input checkbox opt1" id="stripAllComment" type="checkbox" /> <br />
            <label> Strip all comments</label><br />
            <input class="option-input checkbox opt2" id="superCompact" type="checkbox" /> <br />
            <label> Super compact</label><br />
            <input class="option-input checkbox opt3" id="betterIndentation" type="checkbox" /> <br />
            <label> Keep indentation</label><br />
            <input checked="" class="option-input checkbox opt4" id="keepLastComma" type="checkbox" /> <br />
            <label> Remove the last semicolon</label>
        </div>
        <div class="flex">
        <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 />
        <button class="ripplelink" onclick="copyAll(&quot;cssField&quot;);">Copy to Clipboard</button>
        </div>
      </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];function copyAll(){var e=document.getElementById("cssField");e.select(),e.setSelectionRange(0,99999),document.execCommand("copy"),alert("Copied the text: "+e.value)}</script><br />
  </div>
</div>

1. How to Create a CSS Minifier Page on Blogspot

  • Login to Blogger dashboard
  • Create a new page by selecting the menu PAGE NEW PAGE
  • Give the page an appropriate title like CSS Minifier or something
  • Change the text editor to HTML then copy above. If there is an error when saving, just click the DISMISS link. Save!

2. How to Create a CSS Minifier Page in WordPress

  • Login to WordPress dashboard
  • Create a new page through the PAGES menu ► ADD NEW
  • Give the page an appropriate title like CSS Minifier or something
  • Add an HTML block and then copy the code above. If so, save it!

How Does CSS Minifier Work?

In short, CSS Minifier works by removing some unnecessary parts without breaking the functionality of the CSS code itself. For example, comments, spaces, indents, and the last semicolon can be removed without worrying about making the CSS code unworkable. With that, this kind of code

/* Set the appearance of the blog*/ 
body { 
  background: #f7f7f7; 
  padding: 40px 20px; 
}

can be minified to be like this,

body {background:#f7f7f7;padding:40px 20px}

Then how does this script perform compared to other CSS Minifier tools?

Currently there are many free CSS minifier tools that we can easily find. If the script that we use above produces a file that is still less small, it's better to use other tools, right?

Out of curiosity, I tried to compare the compression results of all these tools with the script above. The result? it didn't disappoint!

Original File3.96KB
CleanCSS3.38KB14.65%
CSSCompressor3.16KB20.20%
Script (Super Compact)3.16KB20.20%
GiftofSpeed3.15KB20.45%
Minifier3.15KB20.45%
CSS Minifier3.14KB20.70%

Post a Comment for "How to Create CSS Minifier Pages on Blog"