Tampilan Produk Dua Kolom Di Blogger Otomatis

 Pada kesempatan ini RadioKonoha.Com akan membagikan tutorial CARA MEMBUAT TAMPILAN PRODUK DUA KOLOM DI BLOGGER.

Jika kebanyakan blogger MEMBUAT TAMPILAN PRODUK MENGGUNAKAN POSTINGAN BLOGGER disini saya mencoba sesuatu yang berbeda.

Disini saya akan membuat tampilan produk yang di pasang pada tata letak blogger saja. Jadi pemasangannya juga lebih mudah dan gak seribet membuat tampilan produk menggunakan postingan artikel blog.

Untuk membuat tampilan produk yang hanya di pasang di tata letak blogger kamu, kamu hanya menyiapkan beberapa hal saja.

A. Gambar Produk Kamu

B. Judul Produk

C. Harga Produk

D. Link Demo

Ilustrasi Widget Produk Di Blog Ala Radio Konoha

1. Pengunjung menekan tombol demo untuk melihat demo / deskripsi produk kamu.

2. Pengunjung menekan tombol beli 

3. muncul popup yang menampilkan formulir pemesanan 

4. pembeli di arahkan ke WhatsApp

Keunggulan Widget Produk Buat Blogger Saya Ini

1. Proses pemasangan mudah karena di pasang pada tata letak blogger kamu saja.

2. Tampilan elegan ,modern , dan UI.

3. Kode formulir pemesanan otomatis bisa menangkap judul Produk blogger kamu.

4. Menggunakan Pemesanan Via WhatsApp, Karena Hampir Semua Orang Indonesia Memiliki WhatsApp.

5. Kode widget produk buat blogger dari saya ini tidak bakal menurunkan performa template blogger kamu sedikitpun.

Cara Membuat Widget Produk Di Tata Letak Blogger

Masuk ke menu tata letak blogger kamu > tambahkan widget html javascript > pastekan kode di bawah ini:

<style>
  .produk-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
  }

  .produk-card {
    background: #fff;
    border-radius: 10px;
    width: calc(50% - 15px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    padding: 12px;
  }

  .produk-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
  }

  .produk-card h2,
  .harga {
    text-align: center;
  }

  .produk-card h2 {
    font-size: 16px;
    margin: 10px 0 5px;
  }

  .harga {
    color: #e91e63;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .tombol-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 8px;
  }

  .tombol-demo, .tombol-beli {
    flex: 1;
    padding: 8px;
    font-size: 14px;
    border: none;
    border-radius: 5px;
    color: white;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
  }

  .tombol-demo {
    background: #3f51b5;
  }

  .tombol-beli {
    background: #4caf50;
  }

  .popup-form {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    width: 90%;
    max-width: 400px;
  }

  .popup-form h3 {
    margin-bottom: 15px;
    font-size: 18px;
    text-align: center;
  }

  .form-group {
    margin-bottom: 12px;
  }

  .form-group label {
    font-size: 14px;
    margin-bottom: 5px;
    display: block;
  }

  .form-group input,
  .popup-form select {
    width: 100%;
    padding: 9px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
  }

  .btn-kirim,
  .btn-tutup {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    cursor: pointer;
  }

  .btn-kirim {
    background: #4caf50;
    color: #fff;
    margin-top: 10px;
  }

  .btn-tutup {
    background: #ccc;
    color: #333;
    margin-top: 10px;
  }
</style>

<div class="produk-grid">
  <div class="produk-card">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEyiHCsl-NJRl4C8K4HGDa0mLVhNGak8_3DJmwDRPE7ywWD-Z4lTlr6b-9kSDjYI1Sliax2LvZdXmJ80sJn9AUQ76lgGYSlMDnvdx1JRazMmdf6CivNyN6O8FYsItA7tvrkHCXqrLDyusnXw6WB9D6W5Tge6g5tB013c0gEim_A8O-EvB7YydTZMSC4FI/s800/20250416_191422.jpg" alt="TEMPLATE IGNIEL" loading="lazy" />
    <h2 class="judul-produk">TEMPLATE IGNIEL Cloning</h2>
    <p class="harga">Rp 135.000</p>
    <div class="tombol-wrapper">
      <a href="https://blogcepot.com" class="tombol-demo" target="_blank">Demo</a>
      <button class="tombol-beli">Beli</button>
    </div>
  </div>

  <div class="produk-card">
    <img src="https://i.ibb.co.com/NgBcHzrk/..." alt="TEMPLATE PLUS UI" loading="lazy" />
    <h2 class="judul-produk">TEMPLATE RaKon UI</h2>
    <p class="harga">Rp 100.000</p>
    <div class="tombol-wrapper">
      <a href="http://radiokonoha.com" class="tombol-demo" target="_blank">Demo</a>
      <button class="tombol-beli">Beli</button>
    </div>
  </div>
</div>

<div class="popup-form" id="formPopup">
  <h3>Form Pemesanan</h3>
  <div class="form-group">
    <label>Nama Produk</label>
    <input type="text" id="judulProduk" readonly />
  </div>
  <div class="form-group">
    <label>Nama Anda</label>
    <input type="text" id="nama" placeholder="Nama lengkap Anda" />
  </div>
  <div class="form-group">
    <label>Nomor WhatsApp</label>
    <input type="text" id="wa" placeholder="08xxxxxxxxxx" />
  </div>
  <div class="form-group">
    <label>Metode Pembayaran</label>
    <select id="pembayaran">
      <option value="BRI">BRI</option>
      <option value="SeaBank">SeaBank</option>
      <option value="GoPay">GoPay</option>
      <option value="ShopeePay">ShopeePay</option>
      <option value="QRIS">QRIS</option>
    </select>
  </div>
  <button class="btn-kirim" onclick="kirimWA()">Kirim ke WhatsApp</button>
  <button class="btn-tutup" onclick="document.getElementById('formPopup').style.display='none'">Tutup</button>
</div>

<script defer>
  document.querySelectorAll('.tombol-beli').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var card = this.closest('.produk-card');
      var judul = card.querySelector('.judul-produk').innerText;
      document.getElementById('judulProduk').value = judul;
      document.getElementById('formPopup').style.display = 'block';
    });
  });

  function kirimWA() {
    var judul = document.getElementById('judulProduk').value;
    var nama = document.getElementById('nama').value;
    var wa = document.getElementById('wa').value;
    var bayar = document.getElementById('pembayaran').value;
    var pesan = `Halo, saya ingin membeli:\nProduk: ${judul}\nNama: ${nama}\nWA: ${wa}\nMetode Pembayaran: ${bayar}`;
    var link = `https://wa.me/6285924069386?text=${encodeURIComponent(pesan)}`;
    window.open(link, '_blank');
  }
</script>

Penjelasan Kode Widget Produk Blogger 

Sebelum menjelaskan setiap kode, disini saya sarankan kamu merubah gambar jadi link melalui imgbb.com  saja. Karena ini agar kode widget produk tidak akan menurunkan performa blogspot kamu.

1. Ubah link gambar dengan link gambar milik kamu dan Ubah judul nya jangan lupa.

2. Pada kode https://wa.me/6285924069386?text=${encodeURIComponent(pesan)

Ubah no yang saya warna dengan nomor WhatsApp kamu ya ( tanpa 0)

Dengan adanya widget ini, Blogger bisa tampil seperti toko online profesional tanpa ribet. RadioKonoha.com berhasil membuktikan bahwa tampilan produk modern bisa diwujudkan hanya dengan bermain di tata letak, bukan postingan. Ini menjadi solusi efisien untuk pelaku UMKM, reseller, atau pemilik template yang ingin menjual produk langsung dari blogspot mereka.

Rate This Article

Thanks for reading: Tampilan Produk Dua Kolom Di Blogger Otomatis, Sorry, my English is bad:)