Mudhofar
Just a blogger who lives with curiosity

Blog / WordPress

Membuat Kode Kupon yang Stylish dengan HTML dan CSS

Desember 3, 2023

Pendahuluan

Dalam artikel ini, kita akan mempelajari cara membuat kode kupon yang menarik dan stylish menggunakan HTML dan CSS. Kode kupon ini tidak hanya efektif dalam meningkatkan penjualan, tetapi juga memberikan pengalaman pengguna yang lebih baik.

Selain kupon, kode ini juga dapat digunakan untuk kode-kode lain seperti kode refferal, nomor rekening atau nomor telepon. Harapannya setelah kode ini dipasang, pengunjung bisa lebih mudah mensalinnya dengan satu kali klik.

Struktur HTML dan CSS

Berikut adalah struktur HTML dan CSS yang dapat Anda gunakan untuk membuat kode kupon yang menarik:

<style>
  .coupon-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .coupon-preview {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    margin-top: 30px !important;
    padding: clamp(17px, 5%, 40px) clamp(17px, 7%, 50px) !important;
    max-width: none !important;
    border-radius: 6px !important;
    box-shadow: 0 5px 25px rgba(34, 60, 47, 0.25) !important;
  }

  .coupon-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .coupon-preview,
  .coupon-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .coupon-preview * {
    box-sizing: border-box !important;
  }

  .coupon-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .coupon-preview .preview-input-field {
    margin-top: 20px !important;
    width: 100% !important;
  }

  .coupon-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .coupon-preview .preview-input-field input {
    width: 100% !important;
    height: 40px !important;
    border-radius: 6px !important;
    border: 2px solid #e9e8e8 !important;
    background-color: #fff !important;
    outline: none !important;
    color: #000000 !important;
    font-family: "Montserrat" !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    text-align: center !important;
  }

  .coupon-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .coupon-preview .preview-input-field input::placeholder {
    color: #000000 !important;
    opacity: 1 !important;
  }

  .coupon-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .coupon-preview .preview-input-field input:-ms-input-placeholder {
    color: #000000 !important;
  }

  .coupon-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .coupon-preview .preview-input-field input::-ms-input-placeholder {
    color: #000000 !important;
  }

  .coupon-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .coupon-preview .preview-submit-button {
    margin-top: 10px !important;
    width: 100% !important;
  }

  .coupon-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .coupon-preview .preview-submit-button button {
    width: 100% !important;
    height: 40px !important;
    border: 0 !important;
    border-radius: 6px !important;
    line-height: 0px !important;
    text-transform: none !important;
    font-family: Arial;
    font-weight: bold;
    color: rgb(255, 255, 255);
    font-size: 16px;
    text-align: center;
    background-color: rgb(0, 0, 0);
  }

  .coupon-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .coupon-preview .preview-submit-button button:hover {
    cursor: pointer !important;
  }
</style>

<div class="coupon-container" attr-a attr-b attr-c attr-d attr-e attr-f>
  <div class="coupon-preview" style="background-color: rgb(255, 255, 255); position: relative;">
    <div class="preview-input-field">
      <input type="text" value="DISKON123" readonly style="text-transform: none !important; font-family: Arial; font-weight: normal; color: rgb(0, 0, 0); font-size: 14px; text-align: center; background-color: rgb(255, 255, 255);">
    </div>
    <div class="preview-submit-button">
      <button type="button" onclick="copyToClipboard()" style="text-transform: none !important; font-family: Arial; font-weight: bold; color: rgb(255, 255, 255); font-size: 16px; text-align: center; background-color: rgb(0, 0, 0);">
        Salin Kode Kupon
      </button>
    </div>
  </div>
</div>

<script>
  function copyToClipboard() {
    var copyText = document.querySelector(".preview-input-field input");
    copyText.select();
    document.execCommand("copy");
    alert("Kode kupon telah disalin: " + copyText.value);
  }
</script>

Jadinya seperti di bawah ini:

Penjelasan Kode


Kode di atas adalah kombinasi HTML, CSS, dan JavaScript yang digunakan untuk membuat tampilan formulir kupon diskon yang sederhana. Berikut adalah penjelasan singkatnya:

Gaya (CSS):

  1. Container dan Preview:
    • Membuat container dengan class “coupon-container” yang dapat memiliki atribut tambahan “attr-a” sampai “attr-f”.
    • Menetapkan gaya untuk elemen dengan class “coupon-preview” di dalam container.
    • Mengatur tata letak, margin, padding, shadow, dan border-radius untuk memberikan tampilan formulir.
  2. Input Field dan Tombol:
    • Menyesuaikan gaya untuk input field dan tombol dalam formulir.
    • Mengatur lebar, tinggi, border-radius, dan warna untuk elemen input.
    • Mengatur tampilan tombol, termasuk warna latar belakang dan efek hover.

HTML:

  1. Container dan Preview:
    • Membuat elemen div dengan class “coupon-container” dan atribut tambahan “attr-a” sampai “attr-f”.
    • Di dalamnya, terdapat elemen div dengan class “coupon-preview” yang akan menampilkan formulir kupon.
  2. Input Field dan Tombol:
    • Terdapat input field yang menampilkan nilai kupon (contoh: “DISKON123”) yang tidak dapat diedit oleh pengguna.
    • Tombol “Salin Kode Kupon” yang dapat di klik untuk menyalin nilai kupon ke clipboard.

JavaScript:

  1. Fungsi copyToClipboard:
    • Fungsi ini diaktifkan ketika tombol “Salin Kode Kupon” diklik.
    • Memilih teks dalam input field.
    • Menyalin teks ke clipboard menggunakan perintah document.execCommand("copy").
    • Menampilkan alert yang memberitahu pengguna bahwa kode kupon telah berhasil disalin.

Kode ini menciptakan formulir sederhana tanpa judul yang memungkinkan pengguna menyalin nilai kupon dengan mudah. Gaya CSS memberikan tampilan yang bersih dan responsif, sementara JavaScript menangani fungsionalitas penyalinan ke clipboard.

Contoh Kode Kupon Berjudul

Berikut adalah versi kode HTML dengan penambahan judul di atas kode kupon:

<style>
  .coupon-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .coupon-preview {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    margin-top: 30px !important;
    padding: clamp(17px, 5%, 40px) clamp(17px, 7%, 50px) !important;
    max-width: none !important;
    border-radius: 6px !important;
    box-shadow: 0 5px 25px rgba(34, 60, 47, 0.25) !important;
  }

  .coupon-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .coupon-preview,
  .coupon-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .coupon-preview * {
    box-sizing: border-box !important;
  }

  .coupon-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .coupon-preview .preview-heading {
    width: 100% !important;
  }

  .coupon-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .coupon-preview .preview-heading h5 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    text-transform: none !important;
    font-family: Arial;
    font-weight: bold;
    color: rgb(0, 0, 0);
    font-size: 16px;
    text-align: center;
  }

  .coupon-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .coupon-preview .preview-input-field {
    margin-top: 20px !important;
    width: 100% !important;
  }

  .coupon-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .coupon-preview .preview-input-field input {
    width: 100% !important;
    height: 40px !important;
    border-radius: 6px !important;
    border: 2px solid #e9e8e8 !important;
    background-color: #fff !important;
    outline: none !important;
    color: #000000 !important;
    font-family: "Montserrat" !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    text-align: center !important;
  }

  .coupon-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .coupon-preview .preview-input-field input::placeholder {
    color: #000000 !important;
    opacity: 1 !important;
  }

  .coupon-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .coupon-preview .preview-input-field input:-ms-input-placeholder {
    color: #000000 !important;
  }

  .coupon-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .coupon-preview .preview-input-field input::-ms-input-placeholder {
    color: #000000 !important;
  }

  .coupon-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .coupon-preview .preview-submit-button {
    margin-top: 10px !important;
    width: 100% !important;
  }

  .coupon-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .coupon-preview .preview-submit-button button {
    width: 100% !important;
    height: 40px !important;
    border: 0 !important;
    border-radius: 6px !important;
    line-height: 0px !important;
    text-transform: none !important;
    font-family: Arial;
    font-weight: bold;
    color: rgb(255, 255, 255);
    font-size: 16px;
    text-align: center;
    background-color: rgb(0, 0, 0);
  }

  .coupon-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .coupon-preview .preview-submit-button button:hover {
    cursor: pointer !important;
  }
</style>

<div class="coupon-container" attr-a attr-b attr-c attr-d attr-e attr-f>
  <div class="coupon-preview" style="background-color: rgb(255, 255, 255); position: relative;">
    <div class="preview-heading">
      <h5 style="text-transform: none !important; font-family: Arial; font-weight: bold; color: rgb(0, 0, 0); font-size: 16px; text-align: center;">
        Kode Kupon Diskon:
      </h5>
    </div>
    <div class="preview-input-field">
      <input type="text" value="DISKON123" readonly style="text-transform: none !important; font-family: Arial; font-weight: normal; color: rgb(0, 0, 0); font-size: 14px; text-align: center; background-color: rgb(255, 255, 255);">
    </div>
    <div class="preview-submit-button">
      <button type="button" onclick="copyToClipboard()" style="text-transform: none !important; font-family: Arial; font-weight: bold; color: rgb(255, 255, 255); font-size: 16px; text-align: center; background-color: rgb(0, 0, 0);">
        Salin Kode Kupon
      </button>
    </div>
  </div>
</div>

<script>
  function copyToClipboard() {
    var copyText = document.querySelector(".preview-input-field input");
    copyText.select();
    document.execCommand("copy");
    alert("Kode kupon telah disalin: " + copyText.value);
  }
</script>

Jadinya seperti di bawah ini:

Kode Kupon Diskon:

Contoh Tiga Kode Kupon Berjajar


Berikut adalah contoh kode HTML untuk menampilkan tiga kupon yang berjudul dan disusun dalam tiga kolom sejajar:

<style>
  .coupon-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] {
    display: flex;
    justify-content: space-around;
    margin-top: 30px;
  }

  .coupon-column {
    flex: 1;
  }

  .coupon-column .coupon-preview {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: clamp(17px, 5%, 40px) clamp(17px, 7%, 50px) !important;
    max-width: none !important;
    border-radius: 6px !important;
    box-shadow: 0 5px 25px rgba(34, 60, 47, 0.25) !important;
    background-color: rgb(255, 255, 255);
    position: relative;
    margin-bottom: 20px;
  }

  .coupon-column .coupon-preview * {
    box-sizing: border-box !important;
  }

  .coupon-column .coupon-preview .preview-heading {
    width: 100% !important;
  }

  .coupon-column .coupon-preview .preview-heading h5 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    text-transform: none !important;
    font-family: Arial;
    font-weight: bold;
    color: rgb(0, 0, 0);
    font-size: 16px;
    text-align: center;
  }

  .coupon-column .coupon-preview .preview-input-field {
    margin-top: 20px !important;
    width: 100% !important;
  }

  .coupon-column .coupon-preview .preview-input-field input {
    width: 100% !important;
    height: 40px !important;
    border-radius: 6px !important;
    border: 2px solid #e9e8e8 !important;
    background-color: #fff !important;
    outline: none !important;
    color: #000000 !important;
    font-family: "Montserrat" !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    text-align: center !important;
  }

  .coupon-column .coupon-preview .preview-input-field input::placeholder {
    color: #000000 !important;
    opacity: 1 !important;
  }

  .coupon-column .coupon-preview .preview-input-field input:-ms-input-placeholder {
    color: #000000 !important;
  }

  .coupon-column .coupon-preview .preview-input-field input::-ms-input-placeholder {
    color: #000000 !important;
  }

  .coupon-column .coupon-preview .preview-submit-button {
    margin-top: 10px !important;
    width: 100% !important;
  }

  .coupon-column .coupon-preview .preview-submit-button button {
    width: 100% !important;
    height: 40px !important;
    border: 0 !important;
    border-radius: 6px !important;
    text-transform: none !important;
    font-family: Arial;
    font-weight: bold;
    color: rgb(255, 255, 255);
    font-size: 16px;
    text-align: center;
    background-color: rgb(0, 0, 0);
    line-height: 1.5 !important; /* Nilai ini disesuaikan agar teks tidak menumpuk */
  }

  .coupon-column .coupon-preview .preview-submit-button button:hover {
    cursor: pointer !important;
  }
</style>

<div class="coupon-container" attr-a attr-b attr-c attr-d attr-e attr-f>
  <div class="coupon-column">
    <div class="coupon-preview">
      <div class="preview-heading">
        <h5>
          Kode Kupon 1:
        </h5>
      </div>
      <div class="preview-input-field">
        <input type="text" value="DISKON123" readonly>
      </div>
      <div class="preview-submit-button">
        <button type="button" onclick="copyToClipboard()">
          Salin Kode Kupon
        </button>
      </div>
    </div>
  </div>

  <div class="coupon-column">
    <div class="coupon-preview">
      <div class="preview-heading">
        <h5>
          Kode Kupon 2:
        </h5>
      </div>
      <div class="preview-input-field">
        <input type="text" value="PROMO456" readonly>
      </div>
      <div class="preview-submit-button">
        <button type="button" onclick="copyToClipboard()">
          Salin Kode Kupon
        </button>
      </div>
    </div>
  </div>

  <div class="coupon-column">
    <div class="coupon-preview">
      <div class="preview-heading">
        <h5>
          Kode Kupon 3:
        </h5>
      </div>
      <div class="preview-input-field">
        <input type="text" value="HEMAT789" readonly>
      </div>
      <div class="preview-submit-button">
        <button type="button" onclick="copyToClipboard()">
          Salin Kode Kupon
        </button>
      </div>
    </div>
  </div>
</div>

<script>
  function copyToClipboard() {
    var copyText = event.target.parentNode.parentNode.querySelector(".preview-input-field input");
    copyText.select();
    document.execCommand("copy");
    alert("Kode kupon telah disalin: " + copyText.value);
  }
</script>

Hasilnya menjadi seperti di bawah:

Kode Kupon 1:
Kode Kupon 2:
Kode Kupon 3:

Dengan menggunakan kombinasi HTML, CSS, dan JavaScript seperti di atas, Anda dapat membuat halaman yang menarik dan fungsional untuk menampilkan serta menyalin kode kupon dengan mudah. Selamat mencoba!

Tags:

Mudhofar

Seorang penulis blog dari Indonesia.

You may also like...

Tinggalkan Balasan