Cara Membuat Tool HTML Minifier di Blogger

Cara Membuat Tool HTML Minifier di Blogger – Dalam upaya mengoptimalkan situs agar lebih cepat salah satu yang bisa diupayakan adalah dengan melakukan Minify HTML.

Proses meminimalkan ukuran file HTML atau Minifikasi HTML dilakukan dengan cara menghapus karakter yang tidak diperlukan dalam susunan HTML, seperti spasi/indentasi/dll yang membuat susunan kode menjadi lebih panjang atau ada jarak tertentu yang tidak perlu.

Karena hal tersebut membuat browser yang mengakses situs kita menjadi lebih lama dalam membaca keseluruhan susunan kode HTML, yang membuat loading menjadi lebih lama saat pengunjung mengakses situs.

Oleh karena itu diperlukan proses minify HTML untuk mengurangi susunan yang tidak perlu sehingga file HTML menjadi lebih pendek dan situs menjadi lebih ringan saat diakses.

Cara Buat Tool HTML Minifier Blogger

Sayangnya bagi pengguna Blogger.com belum ada cara otomatis untuk minify HTML seperti pengguna WordPress Self-Host yang hanya perlu mengaktifkan fitur tersebut melalui Plugin Cache yang digunakan.

Sehingga bagi pengguna Blogger.com yang ini melakukan minifikasi HTML harus mengedit manual susunan script yang akan diminify.

Yang sayangnya tidak semua pengguna Blogger.com khsusunya pemula yang belum memahami Coding Dasar pasti kesulitan akan hal itu, entah tidak tahu apa yang harus dihapus atau takut nantinya akan merusak kode HTML sehinnga menjadi tidak berfungsi.

Oleh karena itu, ONLEN.ID membuatkan tool html minifier untuk mempermudah pengguna Blogger.com yang ini melakukan minify kode HTML dengan mudah, untuk membantu semua pemilik situs yang ingin mengoptimalkan kecepatan blog atau web mereka.

Berikut ini tutorial membuat tool html minifer di blogger :

• Buka Blogger.com
• Sign In dengan Akun Kalian
• Buat Halaman Baru
• Beri Judul “HTML Minifier” lalu ubah mode penulisan menjadi Tempilan HTML, seperti pada gambar berikut :

• Dan masukkan script tool HTML minifier blogger di bawah ini :

a. HTML

<div id="html-tool">
  <h2>HTML Minify &amp; Beautify Tool</h2>
  <textarea id="inputHTML" rows="10"></textarea>
  <div class="button-group">
    <button onclick="minifyHTML()">Minify</button>
    <button class="beautify-btn" onclick="beautifyHTML()">Beautify</button>
    <button class="copy-btn" onclick="copyOutput()">Salin Kode</button>
    <button class="clear-btn" onclick="clearOutput()">Hapus Kode</button>
  </div>
  <textarea id="outputHTML" rows="10"></textarea>
</div>

b. CSS

#html-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);
  }

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

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

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

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

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

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

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

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

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

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

c. JavaScript

function minifyHTML() {
    var input = document.getElementById('inputHTML').value;
    var output = input.replace(/s{2,}/g, ' ')
                      .replace(/n/g, '')
                      .replace(/> </g, '><');
    document.getElementById('outputHTML').value = output;
  }

  function beautifyHTML() {
    var input = document.getElementById('inputHTML').value;
    var formatted = input.replace(/></g, '>n<')
                         .replace(/ {2,}/g, ' ')
                         .replace(/ns*n/g, 'n')
                         .trim(); 
    document.getElementById('outputHTML').value = formatted;
  }

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

  function clearOutput() {
    document.getElementById('inputHTML').value = '';
    document.getElementById('outputHTML').value = '';
  }

• Setelah itu klik Publikasikan

Jika kalian kesulitas dalam menyalin kode di atas, kalian juga dapat menyalinnya melalui akun GitHub ONLEN.ID dengan mengakses halaman berikut => https://github.com/onlendotid/tool-html-minifier-blogger

Pengujian Tool HTML Minifier Blogger

Jika halaman sudah dipublikasikan, sekarang saatnya kalian melakukan testing tool minify html blogger tersebut, untuk mengetahui apakah tool tersebut sudah benar-benar berfungsi atau belum.

Caranya dengan membuka Halaman Tool HTML Minifier kalian, contohnya milik ONLEN.ID ada di sini => https://www.onlen.id/p/html-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 contoh script HTML sebelum diminify

<div id="html-tool">
  <h2>HTML Minify &amp; Beautify Tool</h2>
  <textarea id="inputHTML" rows="10"></textarea>
  <div class="button-group">
    <button onclick="minifyHTML()">Minify</button>
    <button class="beautify-btn" onclick="beautifyHTML()">Beautify</button>
    <button class="copy-btn" onclick="copyOutput()">Salin Kode</button>
    <button class="clear-btn" onclick="clearOutput()">Hapus Kode</button>
  </div>
  <textarea id="outputHTML" rows="10"></textarea>
</div>

b. Berikut ini contoh script HTML setelah diminify

<div id="html-tool"><h2>HTML Minify &amp; Beautify Tool</h2><textarea id="inputHTML" rows="10"></textarea><div class="button-group"><button onclick="minifyHTML()">Minify</button><button class="beautify-btn" onclick="beautifyHTML()">Beautify</button><button class="copy-btn" onclick="copyOutput()">Salin Kode</button><button class="clear-btn" onclick="clearOutput()">Hapus Kode</button></div><textarea id="outputHTML" rows="10"></textarea></div>

Penutup

Itulah Tutorial membuat tool HTML Minifier di Blogger yang dapat membantu kalian dalam minify HTML secara manual dengan cepat tanpa takut melakukan kesalahan. Semoga dapat membantu kalian semua dalam mengembangkan situs web.

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.