Add CSS Optimizer Script In Blogger Blogspot

Add CSS Optimizer Script in your blog or Websites

Optimization of CSS code in any website is important. It’s necessary because its help you to cut your website loading time which is important in Google SEO. Google more prefer a website which loads fast, for this many techniques are used and Compressing CSS Code is one technique. For this, I show you how to add in Your Blogger Blog.

Features Of the Tool:

  • Remove the white space (tabs, spaces, carriage returns) abundant, including white spaces before and after the colon (:), semicolon (;)
  • Remove the semicolon character (;) the last brackets (})
  • Open the HTML color code into the form of short (from # ffffff to # fff)
  • Open the CSS code for margin and padding (as margin: 5px 0px 5px 0px margin: 5px 0). Support both 3 Short.

Tutorial:

1.Create a Page

2.Paste Below Code in Your Page.

<form>
<textarea rows="10" id="source" cols="115">Paste your CSS code here......</textarea><br>
<input type="checkbox" id="STB">Compress (all in one line).<br>
<input type="button" value="Optimize CSS Code" onclick="convert('css')"><br>
<textarea rows="10" onclick="this.select();" id="result" cols="115">Your result will be here. Just click to select and copy!</textarea><br>
<div id="status"></div>

3.Go to Blogger Dashbord.

4.Go to Template Section.

5.Click on Edit HTML and Tick on Expand Widget Templates.

Blogger Dashboard
Blogger Dashboard

6.Add below JavaScript code before </head>

<script type="text/javascript">
function convert(){var b=$id("source"),c=$id("result"),a=$id("status"),d;c.value=cssOptimize(b.value);b=b.value.length;c=c.value.length;d=(b-c)/b*100;a.innerHTML="Before: &lt;b&gt;"+b+"&lt;/b&gt; bytes. After: &lt;b&gt;"+c+"&lt;/b&gt; bytes. Ratio: &lt;b&gt;"+d.toFixed(1)+"%&lt;/b&gt;."}function cssOptimize(a){a=a.replace(/[\r\t\n]/g,"");a=a.replace(/ {2,}/g," ");a=a.replace(/ *([{}:;,]) */g,"$1");a=a.replace(/;}/g,"}");a=a.replace(/#([\da-f])\1([\da-f])\2([\da-f])\3/gi,"#$1$2$3");a=a.replace(/(\d+px)( \1){3}/gi,"$1");a=a.replace(/(\d+px \d+px) \1/gi,"$1");a=a.replace(/(\d+px) (\d+px) (\d+px) \2/gi,"$1 $2 $3");a=a.replace(/(\D)0px/gi,"$10");if(!isChecked("STB")){a=a.replace(/}/g,"}\n")}if(isChecked("comments")){a=a.replace(/\/\*.*?\*\//g,"")}return a}function isChecked(a){return $id(a).checked}function $id(a){return document.getElementById(a)};
</script>

Any Question? Ask in Comments.

1 thought on “Add CSS Optimizer Script In Blogger Blogspot

  1. thank you very much, it’s work, This article is very helpful and very beneficial, last thank’s

Leave a Comment

3 Shares
Tweet
Share
+1
Share
Pin