How to Make CSS Minifier Tool on Blogger

For those who often do coding will probably be very familiar with the tool that I will discuss this time. Yes, CSS Minifier is a useful tool for minimizing or compressing the structure of CSS code to make the file size smaller and lighter.

As we know, the small size of CSS or Cascading Style Sheets greatly affects the speed of access when loaded by visitors.

If you just want to just use, there are many websites that provide these minifier tool online. But why not make your own? In addition to being easy, you no longer need to rely on one source that will only benefit other people's websites.

Minify	https://www.minifier.org/
Clean CSS	https://www.cleancss.com/css-minify/
FreeFormatter	https://www.freeformatter.com/css-minifier.html

In addition, readers can make your blog as a place to minimize the CSS structure to be used. From there the traffic will increase over time.

In the previous article, I also gave a tutorial on How to Make HTML Parse Tool on Blogger. For those of you who also intend to create these types of tool, Please click the blue words above.

Returning to the discussion, how do the tool look after implementation? For more details, Look at the image given above in this article.

How, interested? If you are interested, please read to the end while applying to your blog. Happy reading!

How to Create CSS Minifier Tool on a Blog

1. Log in to Blogger
2. Select the Page menu
3. Select New Page
4. Paste in HTML View mode:

<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{position:relative;display:block;clear:both;border-radius:4px;border:1px solid #ededef;transition:all .6s}#cssminifier textarea{width:100%;outline:none;height:240px;margin:0 auto;display:block;padding:20px;font-family:Monospace;font-size:14px;border:0;border-radius:4px 4px 0 0;resize:none}.dark-mode #cssminifier textarea:focus{background-color:#1f1f1f;color:#fff}#cssminifier 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:#005af0;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 4px 4px}#cssminifier button,#cssminifier button[disabled]:active{outline:none;background:rgba(255,255,255,.25);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:4px 5px;border:0;box-shadow:0 2px 6px -4px rgba(0,0,0,0.05);transition:all .3s}#cssminifier button:hover,#cssminifier button:active{background:rgba(255,255,255,.5);color:#fff}#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;padding:0;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:'\2714';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%}.Night #cssminifier textarea{background:#33475c;color:#fff}.Night #cssminifier textarea::placeholder{color:#fff}.Night #cssminifier .button-group{background:#1c2733;color:rgba(255,255,255,.7)}.Night #cssminifier button,.Night #cssminifier button[disabled]:active{background:#33475c;color:#fff}.Night #cssminifier button:hover,.Night #cssminifier button:active{background:#415a74;color:#fff}.dark-mode #cssminifier .button-group{background: #242526;}.dark-mode #cssminifier{border:1px solid #3a3b3c}.dark-mode #cssminifier .button-group label,.dark-mode #cssminifier button,.dark-mode #cssminifier button[disabled]:active{color:#c6c9ce}.dark-mode #cssminifier textarea{background:#18191a}.Blog article.post .post-title {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">Comments</label><br>
<input class="option-input checkbox opt2" id="superCompact" type="checkbox"> <br>
<label for="superCompact">Compact</label><br>
<input class="option-input checkbox opt3" id="betterIndentation" type="checkbox"> <br>
<label for="betterIndentation">Indentation</label><br>
<input checked="" class="option-input checkbox opt4" id="keepLastComma" type="checkbox"> <br>
<label for="keepLastComma">Semicolon</label><br>
</div><button onclick="compressCSS(&quot;cssField&quot;);">Minify</button><br>
<button onclick="clearField(&quot;cssField&quot;);">Clear</button> <br>
<button onclick="selectAll(&quot;cssField&quot;);">Select</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>

5. Done.

After installing the script, please do a review first. If there is anything that needs to be customized, please arrange based on your knowledge in the field of coding.

CSS Minifier Features

In these tool, there are four types of options that you can use, namely Comments, Compact, Indentation, and Semicolon. Each option has its respective function described based on the following initial script:

/* First Name */
.telecom {
  width: 100%;
  height: auto;
}

/* Last Name */
.yaar {
  color: #ffffff;
  background-color: #009ee0;
}

Comments

Useful for minimizing scripts while deleting each comment in /*...*/ writing format.

.telecom{width:100%;height:auto;}
.yaar{color:#ffffff;background-color:#009ee0;}

Compact

Useful for minimizing scripts while connecting each CSS class name. In addition, comments will be deleted.

.telecom{width:100%;height:auto;}.yaar{color:#ffffff;background-color:#009ee0;}

Indentation

Useful for minimizing the script by still following the writing format input into the column.

/* First Name */
.telecom{width:100%;height:auto;}
/* Last Name */
.yaar{color:#ffffff;background-color:#009ee0;}

Semicolon

Useful for minimizing scripts while removing semicolons; at the end of the CSS property line and the CSS value.

/* First Name */
.telecom{width:100%;height:auto}
/* Last Name */
.yaar{color:#ffffff;background-color:#009ee0}

Css Minifier Demo

Demo

How to Minify CSS

In addition to this article, you can directly minimize by pasting the script into the available columns. After that, choose one of the four types of functions that I have described above.

After the selection, please just select MINIFY. CLEAR works to clean up the scripts that are in the column. While SELECT serves to select all the scripts in the column.

Your Tool minifier is now created. Please copy the URL of the page to use in the navigation menu. For now only one view, but does not rule out the possibility of increasing if there are other tools that are also interesting to use on the blog.

Enough articles on how to make css minifier tool on blogger, hopefully it's useful for you. Thank you and good luck.