Cara Memasang Tools Kompresi CSS Minifier Di Blog

Cara Memasang Tools Kompresi CSS Minifier Di Blog - Untuk mempermudah pekerjaan seorang blogger dalam mengelolah blog yang ia miliki maka tentu ia harus memiliki tools-tools yang juga umumnya dipakai oleh blogger pada umumnya.

Ada banyak tools yang umumnya digunakan oleh blogger diantaranya adalah Color Picker, Parhse Kode HTM dan tools yang akan kita bahas pada kesempatan kali ini yakni CSS Minifier.

Apa itu CSS Manifier?

Kecepatan dalam membuka suatu halaman blog merupakan salah satu faktor yang penting bagi suatu blog.  Semakin cepat ia diakses maka semakin memberikan dampak positif bagi blog itu sendiri. Karena jika suatu halaman lama blog lama dimuat maka memberikan rasa tidak nyaman bagi pengunjung dan ujung-ujungnya blog yang kita miliki lambat laun akan mulai sepi dan tinggalkan oleh pengunjung. 

Banyak cara yang digunakan oleh blogger untuk mempercepat loading blog mereka. Salah satunya dengan cara mengkompress file CSS. CSS merupakan singkatan dari Cascading Style Sheet yang berfungsi untuk memperikan tampilan tertentu pada objek atau element pada blog. Mulai dari pemberian warna, pengaturan jarak antar element, memberikan garis tepi atau border dan lain sebagainya.

Untuk mengkompress file CSS bisa dengan menggunakan tools CSS kompresi online seperi CSS Clean, CSS Compressor, minifier.org, CSS Minifier dan masih banyak yang lainnya. Tools kompresi CSS ini juga dapat dipasang diblog yang kita miliki. Bagaimana cara pemasangannya? Silahkan ikuti tutorialnya di bawah ini.

Cara Memasang CSS Minifier Pada Blog

Pemasangan tools kompresi ini amat sangatlah mudah, karena sobat tidak perlu untuk mengotak-atik kode pada halaman template blog. Adapun caranya adalah sebagai berikut.

1. Login terlebih dahulu ke halaman blogger
2. Kemudian pilih Page atau Halaman kemudian pilih Tambah Halaman

3. Berikan judul halaman seperti CSS Minifier atau judul lainnya yang sobat kehendaki.
4. Switch pengeditan halaman ke mode HTML View lalu 

5. Kemudian copy paste semua kode di bawah ini pada halaman tersebut.

<div id="cssminifier">
  <style scoped="">
    #cssminifier {
      background: #ecf0f1;
      position: relative;
      display: block;
      clear: both;
      border-radius: 2px;
      padding: 0px;
    }

    .darkMode #cssminifier {
      background: #3d3b3b;
      border: 1px solid rgba(255, 255, 255, .1)
    }

    #cssminifier textarea {
      width: 100%;
      height: 240px;
      margin: 0 auto;
      display: block;
      background-color: #f4f4f4;
      padding: 18px;
      font: normal 13px 'Fira Mono', monospace;
      border: 0;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
      border-radius: 3px 3px 0 0;
      resize: none
    }

    .darkMode #cssminifier textarea {
      background: #2D2D30;
      color: #e1e1e1;
    }

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

    .darkMode textarea:focus {
      background-color: #f4f4f4;
      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: #344f61;
      text-align: center;
      padding: 20px 20px 40px 20px;
      margin: 0;
      border-radius: 0 0 2px 2px
    }

    .darkMode #cssminifier .button-group {
      background: #212325
    }

    #cssminifier button,
    #cssminifier button[disabled]:active {
      background: rgba(255, 255, 255, 0.2);
      text-align: center;
      color: #fefefe;
      display: inline-block;
      padding: 8px 19px;
      font-size: 13px;
      line-height: 1.471;
      border-radius: 2px;
      margin: 0 5px;
      border: 0;
      transition: all .1s
    }

    .darkMode #cssminifier button,
    #cssminifier button[disabled]:active {
      background: #3c434b;
      text-align: center;
      color: #fefefe;
    }

    #cssminifier button:hover,
    #cssminifier button:active {
      background: #fff;
      color: #344f61
    }

    .darkMode #cssminifier button:hover,
    #cssminifier button:active {
      background: #2b3035;
      color: #e1e1e1
    }

    #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>
  <span class="clear"></span>
  <textarea autofocus="" id="cssField" spellcheck="false"></textarea>
  <div class="button-group">
    <div class="box">
      <input class="opt1" id="stripAllComment" type="checkbox" />
      <label>Comments</label>
      <input class="opt2" id="superCompact" type="checkbox" />
      <label>Compact</label>
      <input class="opt3" id="betterIndentation" type="checkbox" />
      <label>Indentation</label>
      <input checked="" class="opt4" id="keepLastComma" type="checkbox" />
      <label>Semicolon</label>
    </div>
    <button onclick="compressCSS(&quot;cssField&quot;);">Minify</button>
    <button onclick="clearField('cssField');">Clear</button>
    <button onclick="selectAll(&quot;cssField&quot;);">Select</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];

    function copyAll() {
      var e = document.getElementById("cssField");
      e.select(), e.setSelectionRange(0, 99999), document.execCommand("copy"), alert("Copied the text: " + e.value)
    }
  </script>
</div>

6. Dan yang terakhir kllik tombol Publish.

Screenshoot Hasil

Demikian tutorial tentang Cara Memasang Tools Kompresi CSS Minifier Di Blog. Semoga bermanfaat dan jika masih ada yang tidak dimengerti dari langkan-langkah di atas silahkan sobat tanyakan pada kolom komentar di bawah.