How to Make Responsive CSS Minifier Pages?

This CSS Minifier functions to compress / shrink the css code that will be applied to the blog. So that the speed of the blog can feel even faster with the reduction in the size of the css. With a small css it will certainly improve your blog SEO.

Have you ever used a tool to view or check the speed of your blog, then get a message to "Compress CSS"so that your blog speed increases. Then you type in a search engine with the keyword "How to Minify CSS" or even "How to compress CSS".

Surely you will get a link that contains this CSS Minifier, even out there there are those that are not only for CSS, but Javascript and HTML Minifier. Don't you want to create a CSS Minifier on your own blog? to make it easier for you without having to use other people's tools.

How to Create a CSS Minifier Tool Page on Blogspot?

If you want to make this tool on your own blog, please watch and follow the tutorial until it's finished.

First, please log in to your Blogger acco

Then select on the left side menu Page / Page >> New Page/New Page

Then first fill in the page name with CSS Minifier

Click the HTML menu next to Compose

Then paste the code below

<div id="cssminifier">
<style scoped="" type="text/css">
#cssminifier {
    background: #ecf0f1;
    position: relative;
    display: block;
    clear: both;
    border-radius: 5px;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.05)
}

#cssminifier textarea {
    width: 100%;
    height: 240px;
    margin: 0 auto;
    display: block;
    background-color: #fff;
    padding: 20px;
    font: normal 13px 'Courier New', Monospace;
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
    border-radius: 5px 5px 0 0;
    resize: none
}

textarea:focus {
    background-color: #FFF;
    color: #303030
}

#cssminifier .box {
    margin: 10px auto 30px;
    color: rgba(255, 2255, 255, .6);
}

#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: #2980b9;
    text-align: center;
    padding: 20px 20px 40px 20px;
    margin: 0;
    border-radius: 0 0 5px 5px;
    float: none;
}

#cssminifier button,
#cssminifier button[disabled]:active {
    background: rgba(255, 255, 255, 0.2);
    text-align: center;
    color: #fefefe;
    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: #fff;
    color: #2980b9
}

#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 {
    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="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, "'$1'").replace(/\"(.*?)\"/g, "\"$1\"").replace(/(\{|\n|;)?(.[^\{]*?):(.[^\{]*?)(;|\})/g, "$1$2:$3$4").replace(/\{/g, "{")
  }),
  a = a.replace(/<(.*?)('|")(.*?)('|")>/g, function (e) {
   return e.replace(/'(.*?)'/g, "'$1'").replace(/"(.*?)"/g, "\"$1\"")
  }),
  a = a.replace(/\{([\s\S]+?)\}/g, function (e) {
   return e.replace(/([\(\)\{\}\[\]\:\;\,]+)/g, "$1").replace(/\!important/gi, "!important")
  }),
  a = a.replace(/\/\*([\w\W]+?)\*\//gm, "/*$1*/"),
  e.innerHTML = "" + a + "",
  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, ">"),
 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><br /></div>

Lastly save the page.

If you have, please place your page, both in the navigation and in the footer.

This is how to make a responsive and cool CSS Minifier page on Blogspot first. Hopefully this article can help you, don't forget to read other interesting articles.