Welcome Bloggers, So in this article, I will tell you How to Make CSS Minifier Tool on Blogger? which is nothing but a CSS compressor tool in blogger. But before do you know what is CSS Minifier tool or CSS Compressor tool is? Well, If you are from the developer field or know about HTML JavaScript coding then you might be using it. And If you are not using the CSS minify tool in the blogger template then you can create this CSS minify tool online to compress website CSS for making your webpage load faster than before.
Many bloggers started to use these tools and reduce website loading time, how does it work? don't worry I will be sharing that. As we all know the small size of CSS means decreased loading time of blogger websites for visitors. You can find an online CSS minify tool for blogger templates because most of the time Blogspot templates do not minimize the CSS structure properly.
 |
| free CSS modify tool CSS compress tool script in blogger |
According to Google -
Minification can improve the byte efficiency and the loading speed by removing all unwanted characters.
So, Why don't we make our own tool? If yes, then use our CSS Minfier tool script for bloggers and follow the below-mentioned steps to create your own CSS compression tool in blogger.
Along with reducing CSS file size through compress tools, we also need an HTML Parser tool to reduce unnecessary HTML. Therefore for our previous article, know How to Make HTML Parse Tool on Blogger.
How does the CSS Compressor tool work?
CSS Minifier is widely used by developers for minimizing CSS files or compressing the structure of CSS code to make the file size smaller and lighter.
How do I compress a CSS file?
You don't have to compress CSS files manually just use the Online CSS Minify tool that works by detecting the unnecessary spaces and tags used by so many times and by removing those tags decreases the total size of your CSS file.
By this, it will not give any negative effect on your website design or layout. it just helps to load your webpage fast and smoothly.
If you want to create a CSS minify online tool then follow the steps mentioned below.
Also, download and use:
JavaScript Age Calculator tool Script
How To Create CSS Compress Tool In Blogger
So to know How to Create CSS Minifier Tool on a Blog then follow the below steps on your blog page.
- Visit Blogger Dashboard
- Create ‘New page’
- Now, Switch to HTML view and copy and paste below source code
- Make some changes as per your need like color or text.
- Save and Publish.
- Congrats now your own CSS minify tool on the blogger page is ready to use.
Note: Tool Script for blogger– If you do not know how to edit, then we have made a video on our YouTube channel, you will find a link below, by watching that video, you will know how to edit this script. What changes have to be made in this, everything is told in that video, so you must watch that video.
CSS Minifier tool source code
<div id="cssminifier"><style scoped="" type="text/css">
<!-- CSS Minifer By www.technicalarp.com -->
#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;}
</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("cssField");">Minify</button><br>
<button onclick="clearField("cssField");">Clear</button> <br>
<button onclick="selectAll("cssField");">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(/<(.*?)('|")(.*?)('|")>/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,"<").replace(/>/g,">"),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>
If you know how to play with HTML, CSS, and Javascript then you can even customize it in your preferable way.
How do I use the CSS compression tool?
In our CSS minify tool in blogger, one can use from available four options which are Comments, Compact, Indentation, and Semicolon. So each option has its respective function and use, you can check from the below example.
CSS file Demo
/* First Name */
.technicalarp {
width: 100%;
height: auto;
}
/* Last Name */
.bloggertools {
color: #ffffff;
background-color: #009ee0;
}
Comments Removal - Remove Comments from CSS file
If you only want to remove and minimize scripts by deleting each comment in /*...*/ format ten use only this option. And you can combine this with other options also. Like removing comments and semicolons.
.technicalarp{width:100%;height:auto;}
.bloggertools{color:#ffffff;background-color:#009ee0;}
Semicolon - Remove semicolon from CSS file
/* First Name */
.technicalarp{width:100%;height:auto}
/* Last Name */
.bloggertools{color:#ffffff;background-color:#009ee0}
Beautify CSS - Indentation
CSS files with the nonreadable format can be converted into a readable format by using the indentation option. Below is a very simple example so you can try with a complex CSS file.
/* First Name */
.technicalarp{width:100%;height:auto;}
/* Last Name */
.bloggertools{color:#ffffff;background-color:#009ee0;}
Compact - Minize CSS
.technicalarp{width:100%;height:auto;}.bloggertools{color:#ffffff;background-color:#009ee0;}
Now time for a conclusion,
In conclusion of CSS Minifier Tool & CSS Compressor Tool in Blogger
That’s it in this post we learned how to make the CSS minify tool on the blogger website in blogger within a few minutes. I hope that this will work for you, will see you again with a new and useful script for the blogger platform.
I will try my best to fix any issues regarding this topic. We are providing you with many amazing scripts for free, So please follow us on YouTube Channel to get all updates and more useful content.
ConversionConversion EmoticonEmoticon