Cara Membuat Tool CSS Minifier di Blogger

cara-buat-tool-css-minifier-blogger-jasa-buat-web-murah-onlenid.png

Cara Membuat Tool CSS Minifier di Blogger – Tool CSS Minifier merupakan alat yang mempermudah kalian dalam Minify CSS dengan cara menghapus karakter yang tidak diperlukan dalam file CSS.

Hal ini akan membuat file CSS kalian berukuran lebih kecil sehingga situs kalian akan menjadi lebih ringan ketika diakses.

Melakukan Minify CSS merupakan salah satu cara mempercepat loading blog yang ampuh untuk dilakukan, bahkan bagi pengguna CMS seperti WordPress saat ini fitur Minify CSS sudah dapat ditemukan hampir di semua plug-in Cache WordPress.

Cara Buat Tool CSS Minifier Blogger

Sayangnya untuk situs yang menggunakan platform Blogger.com belum tersedia fitur untuk menggunakan plugin cache seperti itu, sehingga harus melakukan minify css secara manual.

Sayangnya tidak semua pengguna blogger.com tahu bagaimana cara coding css yang benar, jika menghapus kode secara sembarangan ditakutkan akan membuat file css menjadi berantakan atau tidak dapat berfungsi dengan benar.

Oleh karena itu, ada baiknya kalian menggunakan tools css minifier agar bisa secara melakukan minify css dengan benar.

Nah berikut ini Onlen.id akan membagikan tutorial memasang tool css minifier di Blogger.

  • Buka Blogger.com
  • Sign In dengan Akun Kalian
  • Beri Judul Halaman sebagai “CSS Minifier”
  • Lalu ubah mode penulisan ke Tampilan HTML seperti pada gambar berikut :
cara-membuat-tool-css-minifier-di-blogger.png
  • Dan masukkan script tool css minifier blogger di bawah ini :

a. HTML

<div id="css-tool">
  <h2>CSS Minify &amp; Beautify Tool</h2>
  <textarea id="inputCSS" rows="10"></textarea>
  <div class="button-group">
    <button onclick="minifyCSS()">Minify</button>
    <button class="beautify-btn" onclick="beautifyCSS()">Beautify</button>
    <button class="copy-btn" onclick="copyOutput()">Salin Kode</button>
    <button class="clear-btn" onclick="clearOutput()">Hapus Kode</button>
  </div>
  <textarea id="outputCSS" rows="10"></textarea>
</div>

b. CSS

#css-tool {
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    width: 90%;
    max-width: 800px;
    margin: 20px auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  #css-tool textarea {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    font-family: monospace;
    margin-top: 10px;
    resize: vertical;
  }

  #css-tool .button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  #css-tool button {
    flex: 1;
    min-width: 100px;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
  }

  #css-tool button:hover {
    background-color: #45a049;
  }

  #css-tool .beautify-btn {
    background-color: #007BFF;
  }

  #css-tool .beautify-btn:hover {
    background-color: #0066cc;
  }

  #css-tool .copy-btn {
    background-color: #FFC107;
    color: #333;
  }

  #css-tool .copy-btn:hover {
    background-color: #e0a800;
  }

  #css-tool .clear-btn {
    background-color: #f44336;
  }

  #css-tool .clear-btn:hover {
    background-color: #d32f2f;
  }

c. JavaScript

function minifyCSS() {
    var input = document.getElementById('inputCSS').value;
    var output = input.replace(/s+/g, ' ')
                      .replace(//*[^*]**+([^/][^*]**+)*//g, '')
                      .replace(/s*{s*/g, '{')
                      .replace(/s*}s*/g, '}')
                      .replace(/s*:s*/g, ':')
                      .replace(/s*;s*/g, ';')
                      .replace(/;}/g, '}');
    document.getElementById('outputCSS').value = output;
  }

  function beautifyCSS() {
    var input = document.getElementById('inputCSS').value;
    var formatted = input.replace(/;/g, ';n  ')
                         .replace(/{/g, ' {n  ')
                         .replace(/}/g, 'n}n')
                         .replace(/ {2,}/g, ' ')
                         .trim(); 
    document.getElementById('outputCSS').value = formatted;
  }

  function copyOutput() {
    var output = document.getElementById('outputCSS');
    output.select();
    output.setSelectionRange(0, 99999);
    document.execCommand('copy');
    alert('Kode berhasil disalin!');
  }

  function clearOutput() {
    document.getElementById('inputCSS').value = '';
    document.getElementById('outputCSS').value = '';
  }
  • Jika sudah, silahkan klik Publikasikan

Jika kalian kesusahan melakukan copy script di atas, kalian juga bisa menyalin scriptnya melalui repository github ONLEN.ID di sini => https://github.com/onlendotid/tool-css-minifier-blogger

Pengujian Tool CSS Minifier di Blogger

Setelah mempublikasikan halaman, jangan lupa untuk melakukan testing pada tools minify css yang sudah kalian buat tadi, untuk mengetahui apakah script sudah berjalan dengan benar dan tools sudah bisa kalian gunakan.

Caranya, Buka Halaman Tools kalian, contohnya milik ONLEN.ID adalah https://www.onlen.id/p/css-minifier.html

Tools ini memiliki 4 tombol antara lain Minify, Beautify, Salin Kode dan Hapus Kode. Yang memiliki fungsi antara lain :

  • Minify : Untuk melakukan minify file css sehingga menjadi lebih “kecil” dan “singkat” dibanding bentuk aslinya
  • Beautify : Untuk membuat file css yang sebelumnya sudah diminify menjadi bentuk semula atau bentuk standar coding CSS
  • Salin Kode : Untuk menyalin atau copy hasil kode yang sudah diminify atau dibeautify
  • Hapus Kode : Untuk menghapus seluruh kode yang ada di tools tersebut dengan cepat

a. Berikut ini contoh script CSS sebelum diminify :

tool-css-minifier-blogger.png
#css-tool {
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    width: 90%;
    max-width: 800px;
    margin: 20px auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  #css-tool textarea {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    font-family: monospace;
    margin-top: 10px;
    resize: vertical;
  }

  #css-tool .button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  #css-tool button {
    flex: 1;
    min-width: 100px;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
  }

  #css-tool button:hover {
    background-color: #45a049;
  }

  #css-tool .beautify-btn {
    background-color: #007BFF;
  }

  #css-tool .beautify-btn:hover {
    background-color: #0066cc;
  }

  #css-tool .copy-btn {
    background-color: #FFC107;
    color: #333;
  }

  #css-tool .copy-btn:hover {
    background-color: #e0a800;
  }

  #css-tool .clear-btn {
    background-color: #f44336;
  }

  #css-tool .clear-btn:hover {
    background-color: #d32f2f;
  }

b. Berikut ini contoh script CSS yang sudah diminify :

tool-minify-css-blogger.png
#css-tool{border:2px solid #ccc;border-radius:10px;padding:20px;width:90%;max-width:800px;margin:20px auto;box-shadow:0 0 10px rgba(0, 0, 0, 0.1)}#css-tool textarea{width:100%;border:1px solid #ccc;border-radius:5px;padding:10px;font-family:monospace;margin-top:10px;resize:vertical}#css-tool .button-group{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}#css-tool button{flex:1;min-width:100px;padding:10px;background-color:#4CAF50;color:white;border:none;border-radius:5px;cursor:pointer;font-size:16px}#css-tool button:hover{background-color:#45a049}#css-tool .beautify-btn{background-color:#007BFF}#css-tool .beautify-btn:hover{background-color:#0066cc}#css-tool .copy-btn{background-color:#FFC107;color:#333}#css-tool .copy-btn:hover{background-color:#e0a800}#css-tool .clear-btn{background-color:#f44336}#css-tool .clear-btn:hover{background-color:#d32f2f}

Penutup

Itulah tutorial membuat tool css minifier di Blogger, semoga dapat membantu kalian dalam mengembangkan situs web berbasis blogger.com.

Tool ini bisa digunakan oleh siapapun tidak terbatas hanya untuk pelanggan Jasa Pembuatan Website Murah dari ONLEN.ID, siapapun yang menggunakan platform blogger.com boleh menggunakan tools ini di situs kalian.

Share your love

Related Posts