Cara Membuat Widget HTML KiosDigital TOKO Bedoeit untuk diterapkan di Halaman Blogger

Widget ini khusus untuk ditampilkan di halaman posting blog saya Toko Bedoeit Online teman teman Ngerapik Blog. Didalamnya terdiri atas Detail pembelian dan Pemesanan untuk TopUp serta Tagihan Listrik, Pembelian Paket Internet, Pembelian Pulsa, dan bisa ditambahkan Mode TopUp lainnya. Untuk Demo nya Klik DISINI. Gak pakai lama, Langsung saja pengaplikasiannya, cekidot wae..

Saya bagi dalam Tiga Kotak ya.. seperti biasa penampatannya WAJIB dalam mode HTML bukan Compose (menulis) di dashboard Halaman blog teman teman semua. Kotak 1 tempatkan dulu, lalu Kotak 2 tepat di Kotak 1 dan terakhir code Kotak 3 dibawah Kotak 2.

Kode Kotak 1:

</> Kotak 1

<div class="tp-premium-container">
  
  
  <div class="tp-side-banner">
    
    <div class="tp-logo-wrapper">
      <div class="tp-logo-circle">🛍️</div> 
      <span class="tp-brand-name">KiosDigital</span>
    </div>
    
    <div class="tp-banner-text">
      <h3>Top Up Instan 24 Jam</h3>
      <p>Solusi tercepat dan terpercaya untuk pengisian pulsa, paket data, dan token listrik rumah Anda.</p>
    </div>

<div class="tp-social-share">
      <a href="https://wa.me" target="_blank" rel="noopener" class="tp-soc-link wa"><svg viewBox="0 0 448 512"><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg></a>
      <a href="https://instagram.com" target="_blank" rel="noopener" class="tp-soc-link ig"><svg viewBox="0 0 448 512"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg></a>
      <a href="https://tiktok.com" target="_blank" rel="noopener" class="tp-soc-link tt"><svg viewBox="0 0 448 512"><path d="M448 209.91a210.06 210.06 0 0 1-122.77-39.25v178.72A162.55 162.55 0 1 1 185 188.31v89.89a72.69 72.69 0 1 0 40.3 65.41V2.66h89.54a111.4 111.4 0 0 0 81.63 77.3v85.25a213 213 0 0 1 51.53 4.7z"/></svg></a>
      <a href="https://facebook.com" target="_blank" rel="noopener" class="tp-soc-link fb"><svg viewBox="0 0 512 512"><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/></svg></a>
      <a href="mailto:email_anda@gmail.com" class="tp-soc-link mail"><svg viewBox="0 0 512 512"><path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7l124 96.5c18.2 14.2 40.5 22.1 63.5 22.1h118.5c23 0 45.3-7.9 63.5-22.1l124.1-96.5zM256 288c14.2 0 28.1-4.8 39.3-13.6l191.1-148.6c4.6-3.6 4.7-10.5-.1-14.2-12.7-9.8-28.5-15.6-45.6-15.6H71.3c-17 0-32.9 5.8-45.6 15.6-4.8 3.7-4.7 10.6-.1 14.2l191.1 148.6c11.2 8.8 25.1 13.6 39.3 13.6z"/></svg></a>
    </div>
  </div>

<div class="tp-main-form">
    <div class="tp-header-title">Detail Pembelian</div>
    
    <div class="tp-input-grid">
      
      <div class="tp-field-group">
        <label>Nomor Telepon / ID Pelanggan</label>
        <input type="number" id="tp-user-number" placeholder="Masukan nomor tujuan transaksi..." required />
      </div>

<div class="tp-field-group">
        <label>Pilih Produk & Nominal</label>
        <select id="tp-user-product" required>
          <option value="" data-kategori="" data-nominal="" />-- Pilih Produk --
          
          <optgroup label="📱 PULSA REGULER">
            <option value="Pulsa 5.000" data-kategori="Pulsa" data-nominal="5.000" />Pulsa Rp 5.000
            <option value="Pulsa 10.000" data-kategori="Pulsa" data-nominal="10.000" />Pulsa Rp 10.000
            <option value="Pulsa 20.000" data-kategori="Pulsa" data-nominal="20.000" />Pulsa Rp 20.000
            <option value="Pulsa 50.000" data-kategori="Pulsa" data-nominal="50.000" />Pulsa Rp 50.000
            <option value="Pulsa 100.000" data-kategori="Pulsa" data-nominal="100.000" />Pulsa Rp 100.000
          </optgroup>

<optgroup label="🌐 PAKET DATA INTERNET">
            <option value="Paket Data 1GB" data-kategori="Paket Data" data-nominal="Internet 1GB / 3 Hari" />Internet 1GB / 3 Hari
            <option value="Paket Data 5GB" data-kategori="Paket Data" data-nominal="Internet 5GB / 30 Hari" />Internet 5GB / 30 Hari
            <option value="Paket Data 10GB" data-kategori="Paket Data" data-nominal="Internet 10GB / 30 Hari" />Internet 10GB / 30 Hari
          </optgroup>

<div class="tp-field-group tp-action-box">
        <button type="button" id="tp-submit-order" class="tp-btn-checkout">Lanjutkan Ke WhatsApp</button>
      </div>
    </div>
  </div>

</div>

Kode Kotak 2:

</> Kotak 2 CSS

/* SISI KIRI: Banner & Identitas Bisnis */
  .tp-side-banner {
    flex: 1 1 32%;
    background: #03AC0E;
    border-radius: 12px;
    padding: 24px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 260px;
    box-sizing: border-box;
  }
  .tp-logo-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .tp-logo-circle {
    width: 36px;
    height: 36px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
  }
  .tp-logo-circle img {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }
  .tp-brand-name {
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.5px;
  }
  .tp-banner-text h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 15px 0 6px 0;
  }
  .tp-banner-text p {
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
    opacity: 0.85;
  }

/* Baris Ikon Media Sosial Minimalis */
  .tp-social-share {
    display: flex;
    gap: 8px;
    margin-top: 20px;
  }
  .tp-soc-link {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 14px;
    transition: all 0.2s ease;
  }
  .tp-soc-link:hover {
    background: #ffffff;
    transform: translateY(-2px);
  }
  /* Mengubah warna teks ikon saat di-hover sesuai warna identitas medsos */
  .tp-social-share { display: flex !important; gap: 10px !important; margin-top: 20px !important; }
  .tp-soc-link { width: 36px !important; height: 36px !important; background: rgba(255, 255, 255, 0.15) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; }
  .tp-soc-link svg { width: 16px !important; height: 16px !important; fill: #ffffff !important; display: inline-block !important; }
  .tp-soc-link:hover { background: #ffffff !important; }
  .tp-soc-link.wa:hover svg { fill: #25D366 !important; }
  .tp-soc-link.ig:hover svg { fill: #E1306C !important; }
  .tp-soc-link.tt:hover svg { fill: #000000 !important; }

/* SISI KANAN: Tampilan Form */
  .tp-main-form {
    flex: 2 1 68%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
  }
  .tp-header-title {
    font-size: 18px;
    font-weight: 700;
    color: #31353B;
    margin-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
  }
  .tp-input-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .tp-field-group {
    display: flex;
    flex-direction: column;
  }
  .tp-field-group label {
    font-size: 12px;
    font-weight: 700;
    color: #6D7588;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }
  .tp-field-group input, .tp-field-group select {
    height: 44px;
    padding: 0 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    color: #31353B;
    background-color: #ffffff;
    box-sizing: border-box;
    width: 100%;
    transition: border-color 0.2s;
  }
  .tp-field-group input:focus, .tp-field-group select:focus {
    border-color: #03AC0E;
    outline: none;
    box-shadow: 0 0 0 3px rgba(3, 172, 14, 0.1);
  }
  
  /* Tombol Checkout Premium */
  .tp-btn-checkout {
    height: 46px;
    width: 100%;
    background-color: #03AC0E;
    color: #ffffff;
    border: none;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    transition: background 0.2s;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(3, 172, 14, 0.2);
  }
  .tp-btn-checkout:hover {
    background-color: #028a0b;
  }

/* RESPONSIVE LAYAR SELULER/HP */
  @media (max-width: 768px) {
    .tp-premium-container { flex-direction: column; gap: 20px; padding: 16px; }
    .tp-side-banner { min-height: 200px; padding: 16px; }
    .tp-social-share { justify-content: center; }
  }
  /* Menghilangkan paksa gaya bawaan tema blog yang merusak tampilan */
  .tp-premium-container, .tp-premium-container div, .tp-premium-container a, .tp-premium-container select, .tp-premium-container input {
    box-sizing: border-box !important;
    max-width: 100% !important;
    float: none !important;
    position: static !important;
  }
  .tp-premium-container {
    display: flex !important;
    gap: 30px !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 24px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #f0f0f0 !important;
    margin: 20px auto !important;
    width: 100% !important;
  }
  .tp-side-banner {
    flex: 1 1 35% !important;
    background: #03AC0E !important;
    border-radius: 12px !important;
    padding: 24px !important;
    color: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 270px !important;
    position: relative !important;
  }
  .tp-logo-wrapper { display: flex !important; align-items: center !important; gap: 10px !important; }
  .tp-logo-circle { width: 36px !important; height: 36px !important; background: rgba(255, 255, 255, 0.2) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; }
  .tp-main-logo-svg { width: 18px !important; height: 18px !important; fill: #ffffff !important; display: inline-block !important; }
  .tp-brand-name { font-weight: 800 !important; font-size: 16px !important; color: #ffffff !important; }
  .tp-banner-text h3 { font-size: 20px !important; font-weight: 700 !important; margin: 15px 0 6px 0 !important; color: #ffffff !important; }
  .tp-banner-text p { font-size: 12px !important; line-height: 1.5 !important; margin: 0 !important; opacity: 0.85 !important; color: #ffffff !important; }
  
  .tp-social-share { display: flex !important; gap: 10px !important; margin-top: 20px !important; }
  .tp-soc-link { width: 36px !important; height: 36px !important; background: rgba(255, 255, 255, 0.15) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; }
  .tp-soc-link svg { width: 16px !important; height: 16px !important; fill: #ffffff !important; display: inline-block !important; }
  .tp-soc-link:hover { background: #ffffff !important; }
  .tp-soc-link.wa:hover svg { fill: #25D366 !important; }
  .tp-soc-link.ig:hover svg { fill: #E1306C !important; }
  .tp-soc-link.tt:hover svg { fill: #000000 !important; }
</style>

Kode Kotak 3:

</> Kotak 3 Script

document.getElementById('tp-submit-order').addEventListener('click', function() {
        const nomorTujuan = document.getElementById('tp-user-number').value;
        const pilihanDropdown = document.getElementById('tp-user-product');
        
        const opsiTerpilih = pilihanDropdown.options[pilihanDropdown.selectedIndex];
        const kategori = opsiTerpilih.getAttribute('data-kategori');
        const nominal = opsiTerpilih.getAttribute('data-nominal');

if (!nomorTujuan || !kategori || !nominal) {
            alert("Silakan masukkan nomor tujuan dan pilih jenis nominal produk terlebih dahulu!");
            return;
        }

const labelTujuan = (kategori === "Token PLN") ? "ID Pelanggan" : "Nomor HP";
        const labelProduk = (kategori === "Token PLN") ? "Nominal Token" : "Pilihan Paket";

const teksPesan = "Halo+Admin,+saya+mau+order+*" + kategori + "*:%0A%0A" +
                          "-+*" + labelTujuan + "*:++" + nomorTujuan + "%0A" +
                          "-+*" + labelProduk + "*:++" + nominal + "%0A%0A" +
                          "Mohon+segera+diproses.+Terima+kasih!";

const linkFinal = "https://wa.me/" + nomorWhatsAppToko + "?text=" + teksPesan;
        window.open(linkFinal, '_blank', 'noopener');
    });
});
</script>

NB:

Ganti // ⚠️ ATUR NOMOR WHATSAPP UTAMA ANDA DI SINI
const nomorWhatsAppToko = "6285764565479";
Ganti <optgroup label="📱 PULSA REGULER">, <optgroup label="🌐 PAKET DATA INTERNET">, <optgroup label="⚡ LISTRIK PLN"> sesua harga jual yang diinginkan
<div class="tp-logo-circle">🛍️</div>

Sekian dulu ya artikel singkat saya tentang "Widget HTML KiosDigital TOKO Bedoeit untuk diterapkan di Halaman Blogger" semog bisa bermanfaat untuk teman teman blogger yang berkunjung ke blog ngerapik ini. Selamat mencoba mempercantik dan memperganteng blogger teman teman semua. Salam Ngerapik Blog.

Translate

Cara Membuat Widget HTML KiosDigital TOKO Bedoeit untuk diterapkan di Halaman Blogger

Posting Komentar

Formulir Kontak