How To Add CSS Compress Tool In Blogger Template

1 /

Also Read...

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 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'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.
#sidebar-wrapper, #midsidebar-wrapper, .post-header-line-1, .post-footer { display:none !important;} #main-wrapper { width:98%!important;} .post { width:98%!important; }
<!-- CSS Minifer By -->
<div id="cssminifier">
<style scoped="" type="text/css">
#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}
#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%;}
<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">
<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>","block","block"}else"none","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];
Step .3 Now Publish Your Post..Done ! 
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 css optimize optimization gadget code.
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 e...

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 css optimize optimization gadget code.


We hope this article helped you to learn How To Add CSS Compress Tool In Blogger Template. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+


Post a Comment Blogger Disqus

1 Comments on "How To Add CSS Compress Tool In Blogger Template" So Far - Post Yours!

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

Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Team Bloggersstand