20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

How To Add CSS Compress Tool In Blogger Template

Learn trick to install embed Free css compressor online tool for blogger template,installing css minifier,css minify to decrease the css code file size to make webpage speed load fast.best css optimize optimization gadget code.
How To Add CSS Compress Compressor Minify Tool In Blogger Template
Have you ever thought to embed CSS compressor tool in your website or blog? Know the benefits of Compressed CSS? Today we are going to explain how to install CSS minify in your blogspot template.Well If you are not a web developer then installing CSS in your blogger template is not worth at all because you are never ever going to compress CSS.But if you are developer,Skilled CSS Writer then you must need it to compress your CSS.However one time everyone need to compress CSS to make your webpage load fast.But don't try unless and until you don't have a knowledge of CSS compressor and also of your template variables.You can ask us to compress we will do it for you free.you can directly contact us. However Now days Custom templates already have compressed CSS you don't need it ,but if your template author is quite popular and is known for his works then only you can believe that your template does not need it.See the CSS Minifer Demo.

How CSS Compressor Works?

CSS online Compressor Free tool detects the unnecessary spaces and tag used by so many times and which have no use ,our Css compressor will remove those tags and also decrease the total size of your old css code.CSS minifier is the best tool to optimize your css and present in a perfect manner and after compressing your css don't worry it will not give effect to your website design or layout.it's just helps to load your webpage fast and smoothly.If you want to add this css minify online free tool then follow the steps mentioned below.

How To Install CSS Minifer In Blogger Website

Step .1 Go to your Dashboard->Create New Page (create new page not new post)->HTML (near the compose tab).
Step .2 Now Copy the below code and paste in your HTML post.
<style>
#sidebar-wrapper, #midsidebar-wrapper, .post-header-line-1, .post-footer { display:none !important;} #main-wrapper { width:98%!important;} .post { width:98%!important; }
</style>
<!-- CSS Minifer By www.BloggersStanD.com -->
<div id="cssminifier">
<style scoped="" type="text/css">
#cssminifier{background:#FF4000;position:relative;display:block;clear:both;border-radius:5px;padding:2px;border:1px;color:666666}
#cssminifier textarea{width:100%;height:240px;margin:0 auto;display:block;background-color:#fff;padding:20px;font:normal 13px 'Courier New',Monospace;border:0;border-radius:5px 5px 0 0;resize:none}
textarea:focus{background-color:#FFF;color:#000000}
#cssminifier .box{margin:10px auto 30px;color:ff4000;}
#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:#666666;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 5px 5px}
#cssminifier button,#cssminifier button[disabled]:active{background:#66666;text-align:center;color:#ff4000;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:#ff4000;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 0 0 10px;vertical-align:middle;border:none;outline:none}
#cssminifier br,#sidebar-wrapper{display:none}
#post-wrapper {float:none;width:100%;}
</div>
</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" /> <br />
<label for="stripAllComment">Strip all comments</label><br />
<input class="opt2" id="superCompact" type="checkbox" /> <br />
<label for="superCompact">Super compact</label><br />
<input class="opt3" id="betterIndentation" type="checkbox" /> <br />
<label for="betterIndentation">Keep indentation</label><br />
<input checked="" class="opt4" id="keepLastComma" type="checkbox" /> <br />
<label for="keepLastComma">Remove the last semicolon</label></div>
<button onclick="compressCSS(&quot;cssField&quot;);">Compress CSS</button><br />
<button onclick="clearField(&quot;cssField&quot;);">Clear Field</button> <br />
<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>
Step .3 Now Publish Your Post..Done ! 

1 comment

  1. Nice Share. Very helpful for image editors. Image Compression Play better role