Cara Mengonfigurasi Fitur HTML Generator (Product Posts & Promotion Card)

Table of Contents

HTML Generator (Product Posts)

Cara Menambahkan Halaman HTML Generator (Product Posts)

  1. Masuk ke Dashboard Blogger > pilih menu Halaman.

  2. Klik tombol HALAMAN BARU.

  3. Di kolom Judul, masukkan teks judul halaman, misalnya: HTML Generator (Product Posts).

  4. Pilih mode Tampilan HTML.

  5. Salin dan tempel kode berikut:

    <div class="hg__product_posts">
  <!--[ Start: Section ]-->
  <section class="hg__product_name">
    <h2 class="c">Nama Produk (Wajib)</h2>
    <input class="elementskit_input hg__product_name_input" autocomplete="off" placeholder="Gila Material Pro (GMP) - Best Premium E-commerce Blogger Template" type="text"/>
  </section>
  <!--[ End: Section ]-->

  <!--[ Start: Section ]-->
  <section class="hg__product_label">
    <h2 class="c">Lencana Produk (Opsional)</h2>
    <input class="elementskit_input hg__product_badge_input" autocomplete="off" placeholder="NEW" type="text"/>
  </section>
  <!--[ End: Section ]-->

  <!--[ Start: Section ]-->
  <section class="hg__product_images">
    <h2 class="c">Foto Produk (Wajib)</h2>
    <div class="elementskit_alert alert_info">
      <div class="alert_message">Masukkan maks. 6 foto produk.</div>
    </div>
    <div class="hg__items">
      <button class="add_button elementskit_button outlined font_bold">Tambah daftar baru</button>
    </div>
  </section>
  <!--[ End: Section ]-->

  <!--[ Start: Section ]-->
  <section class="hg__product_sold_count">
    <h2 class="c">Produk Terjual (Opsional)</h2>
    <input class="elementskit_input hg__product_sold_count_input" autocomplete="off" placeholder="Terjual 10rb+" type="text"/>
  </section>
  <!--[ End: Section ]-->

  <!--[ Start: Section ]-->
  <section class="hg__product_variant">
    <h2 class="c">Varian Produk</h2>
    <div class="elementskit_alert alert_info">
      <div class="alert_message">Masukkan maks. 2 tipe varian.</div>
    </div>
    <div class="hg__items">
      <button class="add_button elementskit_button outlined font_bold">Tambah daftar baru</button>
    </div>
  </section>
  <!--[ End: Section ]-->

  <!--[ Start: Section ]-->
  <section class="hg__product_price">
    <h2 class="c">Harga Produk</h2>
    <div class="hg__items">
      <div class="hg__item">
        <label>Harga Satuan</label>
        <span>Rp</span>
        <input class="elementskit_input hg__product_price_input" autocomplete="off" placeholder="Harga" type="number"/>
      </div>
      <div class="hg__item">
        <label>Harga Diskon</label>
        <span>Rp</span>
        <input class="elementskit_input hg__product_discount_price_input" autocomplete="off" placeholder="Harga" type="number"/>
      </div>
      <div class="hg__item">
        <label>Diskon</label>
        <span>%</span>
        <input class="elementskit_input hg__product_percentage_input" autocomplete="off" placeholder="0" disabled="" type="number"/>
      </div>
    </div>
  </section>
  <!--[ End: Section ]-->

  <!--[ Start: Section ]-->
  <section class="hg__product_quantity">
    <h2 class="c">Label Jumlah (Wajib)</h2>
    <input class="elementskit_input hg__product_quantity_input" autocomplete="off" placeholder="Jumlah" type="text" value="Jumlah"/>
  </section>
  <!--[ End: Section ]-->

  <!--[ Start: Section ]-->
  <section class="hg__product_marketplace">
    <h2 class="c">Marketplace (Opsional)</h2>
    <div class="elementskit_alert alert_info">
      <div class="alert_message">Masukkan maks. 10 marketplace.</div>
    </div>
    <div class="hg__form_group">
      <label>Label</label>
      <input class="elementskit_input hg__product_marketplace_label_input" autocomplete="off" placeholder="Belanja di Marketplace:" type="text" value="Belanja di Marketplace:"/>
    </div>
    <div class="hg__items">
      <button class="add_button elementskit_button outlined font_bold">Tambah daftar baru</button>
    </div>
  </section>
  <!--[ End: Section ]-->

  <!--[ Start: Section ]-->
  <section class="hg__product_details">
    <h2 class="c">Detail Produk (Wajib)</h2>
    <div class="elementskit_alert alert_success">
      <div class="alert_message">Disarankan untuk membuat deskripsi melalui Postingan Blogger dalam mode <b>Tampilan menulis</b>. Setelah selesai, salin semua kode dari mode <b>Tampilan HTML</b> dan tempelkan ke dalam kolom konten.</div>
    </div>
    <div class="hg__items">
      <div class="hg__item">
        <label>Tab 1</label>
        <input class="elementskit_input" autocomplete="off" placeholder="Deskripsi" type="text"/>
        <textarea placeholder="Konten"></textarea>
      </div>
      <div class="hg__item">
        <label>Tab 2</label>
        <input class="elementskit_input" autocomplete="off" placeholder="Fitur Template" type="text"/>
        <textarea placeholder="Konten"></textarea>
      </div>
      <div class="hg__item">
        <label>Tab 3</label>
        <input class="elementskit_input" autocomplete="off" placeholder="Catatan Perubahan" type="text"/>
        <textarea placeholder="Konten"></textarea>
      </div>
      <div class="hg__item">
        <label>Tab 4</label>
        <input class="elementskit_input" autocomplete="off" placeholder="Info Penting" type="text"/>
        <textarea placeholder="Konten"></textarea>
      </div>
    </div>
  </section>
  <!--[ End: Section ]-->

  <!--[ Start: Section ]-->
  <section class="hg__results">
    <h2 class="c">Hasil Kode</h2>
    <div class="elementskit_alert alert_info">
      <div class="alert_message">Salin dan tempel kode yang dihasilkan ke dalam postingan di mode <b>Tampilan HTML</b>.</div>
    </div>
    <button class="generate_code_button elementskit_button unelevated font_bold" type="button">Buat kode</button>
    <pre class="no_num" data-lang="&lt;/&gt;" style="margin:15px 0 0;"><code>Output</code></pre>
  </section>
  <!--[ End: Section ]-->
</div>

  6. Setelah semua dikonfigurasi klik tombol PUBLIKASIKAN.

  7. Selesai

Cara Menggunakan HTML Generator (Product Posts)

  1. Nama Produk (Wajib)

    Masukkan teks nama produk, misalnya: Gila Material Pro (GMP) - Best Premium E-commerce Blogger Template.

  2. Lencana Produk (Opsional)

    Masukkan teks lencana, misalnya: BARU, NEW, HOT.

  3. Foto Produk (Wajib)

    Masukkan URL gambar produk Anda, misalnya: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnsuAWidsZEkteNIl_z_UurBdJuvz4gUTHjM8b3wd9RWyfoCwQo1T6EG3n7vgohTWOA2XgYL4tMJT835Oc_n4RPHdjIUYLlexuFGTqRKDp-gLHLzEsQrC5g73V8Gz5cHlE8ZtqiFgayFPFQ7CZgxWgdD10UwciJbdZz0k4LA0OnAo8_zTJfKIP1P4AS3w/s1600/Samsung%20Galaxy%20S25+%2012%20512GB%20-%20Icy%20Blue.jpeg.

  4. Produk Terjual (Opsional)

    Masukkan teks produk terjual, misalnya: Terjual 10rb+.

  5. Varian Produk

    Tambahkan varian produk hingga 2 tipe varian.

    Tipe Varian 1

    1. Masukkan nama varian, misalnya: Pilih warna.
    2. Masukkan nilai varian, misalnya: Putih, Biru, Merah.

    Tipe Varian 2

    1. Masukkan nama varian, misalnya: Pilih ukuran.
    2. Masukkan nilai varian, misalnya: S, M, L, XL, XXL.

    Tabel Varian

    1. Masukkan nilai harga, misalnya: 150000.
    2. Masukkan nilai harga diskon, misalnya: 130000.
    3. Diskon dihitung secara otomatis sebagai persentase dari total harga, menghasilkan harga setelah diskon.
    4. Masukkan nilai stok, misalnya: 100.

  6. Label Jumlah (Wajib)

    Masukkan label jumlah, misalnya: Jumlah/Quantity.

  7. Marketplace (Opsional)

    Tambahkan tautan keluar menuju halaman marketplace.

    Label

    Masukkan label, misalnya: Belanja di Marketplace:.

    Marketplace

    1. Masukkan URL gambar marketplace, misalnya: https://blogger.googleusercontent.com/img/a/AVvXsEgnFnDWDClL2c7mr5Dns19svBACuUkljqhGNiQZ8dbuAPuQoa17QdFjLukiBf_z0Sa3usqKW3fZakQ92Ua89B2P-s2TgPHp331qf56T9JOURFai1OKa2j_7OPbYFwqo4jNUtjtmxL8thz83xjWn_XK4dcrUoDN8C8gtC0MxM9mT0WSiWfameP6bXNBVqPNS=s614.
    2. Masukkan link tujuan, misalnya: https://www.gilatemax.com/.

  8. Detail Produk (Wajib)

    Masukkan detail produk, misalnya: Detail, Spesifikasi, dan Info Penting.

  9. Hasil Kode

    Klik tombol Buat kode kemudian salin dan tempel kode yang dihasilkan ke dalam postingan di mode Tampilan HTML.

Cara Menampilkan Produk yang Tidak Tersedia

Untuk menandai produk yang sudah tidak tersedia di toko Anda, tambahkan kode HTML berikut ke dalam postingan di mode Tampilan HTML:

<div class="product_not_available"></div>

HTML Generator (Promotion Card)

Cara Menambahkan Halaman HTML Generator (Promotion Card)

  1. Masuk ke Dashboard Blogger > pilih menu Halaman.

  2. Klik tombol HALAMAN BARU.

  3. Di kolom Judul, masukkan judul halaman seperti HTML Generator (Promotion Card).

  4. Pilih mode Tampilan HTML.

  5. Salin dan tempel kode berikut:

    <div class="hg__promotion_card">
  <!--[ Start: Section ]-->
  <section class="hg__promotion_card_item">
    <h2 class="c">Promotion Card</h2>
    <div class="elementskit_alert alert_info">
      <div class="alert_message">Masukkan maks. 3 item.</div>
    </div>
    <div class="hg__items">
      <button class="add_button elementskit_button outlined font_bold">Tambah daftar baru</button>
    </div>
  </section>
  <!--[ End: Section ]-->

  <!--[ Start: Section ]-->
  <section class="hg__results">
    <h2 class="c">Hasil Kode</h2>
    <div class="elementskit_alert alert_info">
      <div class="alert_message">Salin dan tempel kode yang dihasilkan ke dalam kolom Konten pada widget <b>Promotion Card</b>, yang terletak di menu <b>Tata Letak</b>. Baca: <a href="/p/cara-mengonfigurasi-fitur-promotion-card.html">Cara Mengonfigurasi Fitur Promotion Card</a>.</div>
    </div>
    <button class="generate_code_button elementskit_button unelevated font_bold" type="button">Buat kode</button>
    <pre class="no_num" data-lang="&lt;/&gt;" style="margin:15px 0 0;"><code>Output</code></pre>
  </section>
  <!--[ End: Section ]-->
</div>

  6. Setelah semua dikonfigurasi klik tombol PUBLIKASIKAN.

  7. Selesai

Cara Menggunakan HTML Generator (Promotion Card)

  1. Promotion Card

    Tambahkan tampilan kartu promosi di halaman beranda.

    Lencana

    Masukkan teks lencana, misalnya: BARU, NEW, HOT.

    Judul

    Masukkan teks judul, misalnya: GMP ECO v3.0.

    Slogan

    Masukkan teks slogan, misalnya: Paling Banyak Diminati.

    Ketersediaan

    Masukkan teks ketersediaan, misalnya: Kini tersedia. Mulai Rp250.000.

    Label Tombol

    Masukkan label tombol, misalnya: Beli sekarang.

    Link Tujuan

    Masukkan link tujuan, misalnya: https://www.gilatemax.com/2022/04/gila-material-pro-premium-blogger.html.

    URL Gambar

    Masukkan URL gambar, misalnya: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtb7X-AujtJRU0hPxH2Mn9ceWFCQsihxHJkg-VSEbuknydU_sBJGxX0c_bIw2ELY9T9XUfOBVHI4EsIecvlb0qLK5Px5IQq0po4tUnH6re7QFTiImsa3QcjwmCFHyUuMabzSFzHSrNb_Tt4zJbT9Md42euDrOY9aZdWnA_qO-wfDyr_QRtTvChkaJSKvQ/s1600/iPhone%2016%20Pro.webp.

  2. Hasil Kode

    Klik tombol Buat kode kemudian Salin dan tempel kode yang dihasilkan ke dalam kolom Konten pada widget Promotion Card, yang terletak di menu Tata Letak.

Jika Anda ingin melaporkan beberapa bug, Anda dapat menuliskannya di bagian komentar pada halaman Bug Report dan jika Anda ingin meminta fitur baru atau ingin memberikan umpan balik, silakan tuliskan di bagian komentar pada halaman Request dan Feedback.
Posting Komentar
Batal