Cara Membuat Halaman Aspect Ratio Calculator dengan HTML Blogger

Halo pembaca setia blog ini! Pada kesempatan kali ini, kami akan membahas tentang cara membuat halaman kalkulator rasio aspek menggunakan HTML pada platform Blogger. Kalkulator ini akan memungkinkan pengguna untuk menghitung rasio aspek dari suatu objek dengan memasukkan nilai lebar dan tinggi. Mari kita mulai!

Membuat Halaman HTML

Pertama, buka dasbor Blogger Anda dan buatlah sebuah posting baru. Pada mode pengeditan, pilih opsi "HTML" untuk mengedit kode HTML secara langsung. Kemudian, salin dan tempelkan kode HTML di bawah ini ke dalam posting tersebut:

<style>
    .aspect-ratio-container {
      text-align: center;
      margin-top: 20px;
    }
    .aspect-ratio-input {
      margin-bottom: 10px;
    }
  </style>
  <script type="text/javascript">
    function hitungAspectRatio() {
      var width = document.getElementById("width").value;
      var height = document.getElementById("height").value;

      if (width > 0 && height > 0) {
        var gcd = greatestCommonDivisor(width, height);
        var aspectRatio = (width / gcd) + ":" + (height / gcd);
        document.getElementById("result").innerHTML = "Aspect Ratio: " + aspectRatio;
      } else {
        document.getElementById("result").innerHTML = "Masukkan nilai lebar dan tinggi yang valid.";
      }
    }

    function greatestCommonDivisor(a, b) {
      if (b === 0) {
        return a;
      } else {
        return greatestCommonDivisor(b, a % b);
      }
    }
  </script>
<div class="aspect-ratio-container">
    <label>Lebar/Width:</label>
    <br />
    <input class="aspect-ratio-input" id="width" type="number" />
    <br />
    <label>Tinggi/Height:</label>
    <br />
    <input class="aspect-ratio-input" id="height" type="number" />
    <br />
    <button onclick="hitungAspectRatio()">Hitung</button>
    <br />
    <div id="result"></div>
  </div>

Pastikan untuk menyalin seluruh kode HTML di atas. Setelah menempelkan kode tersebut, klik tombol "Publikasikan" untuk menyimpan perubahan.

Preview dan Penyesuaian

Sekarang, Anda dapat melihat hasilnya dengan mengklik tombol "Pratinjau" atau membuka posting tersebut di tab baru pada browser. Anda akan melihat halaman kalkulator rasio aspek yang baru saja Anda buat.

Jika Anda ingin menyesuaikan tampilan halaman, Anda dapat mengedit kode CSS di dalam tag `<style>`. Misalnya, Anda dapat mengubah warna latar belakang, ukuran font, atau tata letak elemen-elemen pada halaman sesuai dengan preferensi Anda.

Publikasikan dan Bagikan

Setelah Anda puas dengan tampilan dan fungsionalitas halaman kalkulator rasio aspek, Anda dapat mengklik tombol "Publikasikan" untuk mempublikasikan posting tersebut. Bagikan link posting tersebut kepada pengunjung blog Anda, sehingga mereka dapat mengakses dan menggunakan kalkulator rasio aspek yang telah Anda buat.

Selamat! Anda telah berhasil membuat halaman kalkulator rasio aspek menggunakan HTML pada platform Blogger. Dengan adanya kalkulator ini, pengunjung blog Anda dapat dengan mudah menghitung rasio aspek suatu objek. Selamat mencoba dan semoga bermanfaat!