Beranda Dokumentasi Widget Product Showcase

10/01/2022 01:34:00 AM

Product Showcase

Konfigurasi widget Product Showcase.

Ishar Yulian Satriani

0 min read

Widget ini berguna khususnya untuk para affiliator seperti untuk produk Shopee, Tokopedia, atau lainnya. Dengan widget ini kita bisa memajang produk lebih dari 1 namun tidak menghabiskan banyak space di blog. Sehingga kemungkinan mendapatkan klik produk lebih banyak lagi.

Widget ini sudah responsif, jadi bisa ditaruh di mana aja misal di header, sidebar, atau postingan. Tapi saran saya, tempat terbaik untuk menaruh widget ini yaitu di bawah postingan karena kemungkinan mendapat kliknya lebih besar dari tempat yang lain.

Widget ini memiliki 3 pilihan tampilan khusus seperti Default, Shopee, dan Tokopedia. Anda dapat menggunakan widget ini cukup dengan menyalin kode HTML dan pastekan di dalam postingan dalam mode Tampilan HTML.

Jumlah produk yang ditampilkan secara default hanya 5, tapi bisa ditambahkan lebih banyak lagi.

Daftar Isi

Tampilkan Sembunyikan

Produk Default

Rekomendasi produk dari Gila Temax

Jobzeek - Best Premium Blogger Template for Job Posting

Rp250.000

Beli Sekarang

Zerch Pro - Best Premium Blogger Template for AdSense

Rp120.000

Beli Sekarang

Vulia Theme - Premium Blogger Template

Rp230.000

Beli Sekarang

Gila Material PRO - Premium Blogger Template

Rp140.000

Beli Sekarang

Gila Material - Free Blogger Template for AdSense

Rp0

Download Sekarang

<div class="product_default">
  <div class="title">
    Rekomendasi produk dari Gila Temax
  </div>
  <div class="product_content">
    <div class="product_inside">

      <!-- Product 1 -->
      <div class="product_list">
        <div class="product_thumbnail">
          <img alt="Thumbnail" src="TARUH_URL_GAMBAR_DISINI" width="800" height="800"/>
        </div>
        <div class="product_title">
          TULIS JUDUL DISINI
        </div>
        <div class="product_price">
          TULIS HARGA DISINI
        </div>
        <a class="buy_now_button" href="TARUH_LINK_DISINI" rel="nofollow noopener noreferer" target="_blank">
          Beli Sekarang
        </a>
      </div>

      <!-- Product 2 -->
      <div class="product_list">
        <div class="product_thumbnail">
          <img alt="Thumbnail" src="TARUH_URL_GAMBAR_DISINI" width="800" height="800"/>
        </div>
        <div class="product_title">
          TULIS JUDUL DISINI
        </div>
        <div class="product_price">
          TULIS HARGA DISINI
        </div>
        <a class="buy_now_button" href="TARUH_LINK_DISINI" rel="nofollow noopener noreferer" target="_blank">
          Beli Sekarang
        </a>
      </div>

      <!-- Product 3 -->
      <div class="product_list">
        <div class="product_thumbnail">
          <img alt="Thumbnail" src="TARUH_URL_GAMBAR_DISINI" width="800" height="800"/>
        </div>
        <div class="product_title">
          TULIS JUDUL DISINI
        </div>
        <div class="product_price">
          TULIS HARGA DISINI
        </div>
        <a class="buy_now_button" href="TARUH_LINK_DISINI" rel="nofollow noopener noreferer" target="_blank">
          Beli Sekarang
        </a>
      </div>

      <!-- Product 4 -->
      <div class="product_list">
        <div class="product_thumbnail">
          <img alt="Thumbnail" src="TARUH_URL_GAMBAR_DISINI" width="800" height="800"/>
        </div>
        <div class="product_title">
          TULIS JUDUL DISINI
        </div>
        <div class="product_price">
          TULIS HARGA DISINI
        </div>
        <a class="buy_now_button" href="TARUH_LINK_DISINI" rel="nofollow noopener noreferer" target="_blank">
          Beli Sekarang
        </a>
      </div>

      <!-- Product 5 -->
      <div class="product_list">
        <div class="product_thumbnail">
          <img alt="Thumbnail" src="TARUH_URL_GAMBAR_DISINI" width="800" height="800"/>
        </div>
        <div class="product_title">
          TULIS JUDUL DISINI
        </div>
        <div class="product_price">
          TULIS HARGA DISINI
        </div>
        <a class="buy_now_button" href="TARUH_LINK_DISINI" rel="nofollow noopener noreferer" target="_blank">
          Beli Sekarang
        </a>
      </div>

    </div>
  </div>
</div>

Produk Shopee

Rekomendasi produk dari Shopee

HIJAB SEGIEMPAT VOAL WAFFLE LASER CUT SANDI MORSE BY AZARA

Rp15.000

Beli Sekarang

Kerudung Paris Sekolah TEBAL TIDAK NERAWANG Neci Full 4 Sisi Jilbab Segi Empat Polos Putih Coklat Pramuka Daily Hijab Style by Lilisa

Rp18.800

Beli Sekarang

Ravindra shawl malay silk luxury(harga grosir tanpa label)

Rp39.999

Beli Sekarang

Aisa Blouse Crinckle premium - Heva blouse Oversize crinckle - Blouse Wanita

Rp47.934

Beli Sekarang

Jaket Sweater Hoodie Smile Reinbow Sablon Original Pria Wanita High Quality

Rp76.000

Beli Sekarang

<div class="product_shopee">
  <div class="title">
    Rekomendasi produk dari Shopee
  </div>
  <div class="product_content">
    <div class="product_inside">

      <!-- Product 1 -->
      <div class="product_list">
        <div class="product_thumbnail">
          <img alt="Thumbnail" src="TARUH_URL_GAMBAR_DISINI" width="800" height="800"/>
        </div>
        <div class="product_title">
          TULIS JUDUL DISINI
        </div>
        <div class="product_price">
          TULIS HARGA DISINI
        </div>
        <a class="buy_now_button" href="TARUH_LINK_DISINI" rel="nofollow noopener noreferer" target="_blank">
          Beli Sekarang
        </a>
      </div>

      <!-- Product 2 -->
      <div class="product_list">
        <div class="product_thumbnail">
          <img alt="Thumbnail" src="TARUH_URL_GAMBAR_DISINI" width="800" height="800"/>
        </div>
        <div class="product_title">
          TULIS JUDUL DISINI
        </div>
        <div class="product_price">
          TULIS HARGA DISINI
        </div>
        <a class="buy_now_button" href="TARUH_LINK_DISINI" rel="nofollow noopener noreferer" target="_blank">
          Beli Sekarang
        </a>
      </div>

      <!-- Product 3 -->
      <div class="product_list">
        <div class="product_thumbnail">
          <img alt="Thumbnail" src="TARUH_URL_GAMBAR_DISINI" width="800" height="800"/>
        </div>
        <div class="product_title">
          TULIS JUDUL DISINI
        </div>
        <div class="product_price">
          TULIS HARGA DISINI
        </div>
        <a class="buy_now_button" href="TARUH_LINK_DISINI" rel="nofollow noopener noreferer" target="_blank">
          Beli Sekarang
        </a>
      </div>

      <!-- Product 4 -->
      <div class="product_list">
        <div class="product_thumbnail">
          <img alt="Thumbnail" src="TARUH_URL_GAMBAR_DISINI" width="800" height="800"/>
        </div>
        <div class="product_title">
          TULIS JUDUL DISINI
        </div>
        <div class="product_price">
          TULIS HARGA DISINI
        </div>
        <a class="buy_now_button" href="TARUH_LINK_DISINI" rel="nofollow noopener noreferer" target="_blank">
          Beli Sekarang
        </a>
      </div>

      <!-- Product 5 -->
      <div class="product_list">
        <div class="product_thumbnail">
          <img alt="Thumbnail" src="TARUH_URL_GAMBAR_DISINI" width="800" height="800"/>
        </div>
        <div class="product_title">
          TULIS JUDUL DISINI
        </div>
        <div class="product_price">
          TULIS HARGA DISINI
        </div>
        <a class="buy_now_button" href="TARUH_LINK_DISINI" rel="nofollow noopener noreferer" target="_blank">
          Beli Sekarang
        </a>
      </div>

    </div>
  </div>
</div>

Produk Tokopedia

Rekomendasi produk dari Tokopedia

T-shirt Oversized - Kaos polos Oversized basic T-shirt - Mineral Green - Mineral Green, S

Rp65.000

Beli Sekarang

Baju Kaos oblong Polos Hitam cotton 24s Pria Dewasa Size L-XL-XXL-XXL - tosca, M

Rp18.500

Beli Sekarang

Celana pendek pria santai polos ukuran 3/4 - Hitam, M fit L

Rp24.999

Beli Sekarang

CELANA PENDEK HEYLOOK PRIA MOTIF KOTAK SHORT PANTS SQUARE - Navy

Rp25.000

Beli Sekarang

LUCIFER BLACK |MNM x McKinley| Ransel Tas Punggung Backpack Pria ORI

Rp189.050

Beli Sekarang

<div class="product_tokopedia">
  <div class="title">
    Rekomendasi produk dari Tokopedia
  </div>
  <div class="product_content">
    <div class="product_inside">

      <!-- Product 1 -->
      <div class="product_list">
        <div class="product_thumbnail">
          <img alt="Thumbnail" src="TARUH_URL_GAMBAR_DISINI" width="800" height="800"/>
        </div>
        <div class="product_title">
          TULIS JUDUL DISINI
        </div>
        <div class="product_price">
          TULIS HARGA DISINI
        </div>
        <a class="buy_now_button" href="TARUH_LINK_DISINI" rel="nofollow noopener noreferer" target="_blank">
          Beli Sekarang
        </a>
      </div>

      <!-- Product 2 -->
      <div class="product_list">
        <div class="product_thumbnail">
          <img alt="Thumbnail" src="TARUH_URL_GAMBAR_DISINI" width="800" height="800"/>
        </div>
        <div class="product_title">
          TULIS JUDUL DISINI
        </div>
        <div class="product_price">
          TULIS HARGA DISINI
        </div>
        <a class="buy_now_button" href="TARUH_LINK_DISINI" rel="nofollow noopener noreferer" target="_blank">
          Beli Sekarang
        </a>
      </div>

      <!-- Product 3 -->
      <div class="product_list">
        <div class="product_thumbnail">
          <img alt="Thumbnail" src="TARUH_URL_GAMBAR_DISINI" width="800" height="800"/>
        </div>
        <div class="product_title">
          TULIS JUDUL DISINI
        </div>
        <div class="product_price">
          TULIS HARGA DISINI
        </div>
        <a class="buy_now_button" href="TARUH_LINK_DISINI" rel="nofollow noopener noreferer" target="_blank">
          Beli Sekarang
        </a>
      </div>

      <!-- Product 4 -->
      <div class="product_list">
        <div class="product_thumbnail">
          <img alt="Thumbnail" src="TARUH_URL_GAMBAR_DISINI" width="800" height="800"/>
        </div>
        <div class="product_title">
          TULIS JUDUL DISINI
        </div>
        <div class="product_price">
          TULIS HARGA DISINI
        </div>
        <a class="buy_now_button" href="TARUH_LINK_DISINI" rel="nofollow noopener noreferer" target="_blank">
          Beli Sekarang
        </a>
      </div>

      <!-- Product 5 -->
      <div class="product_list">
        <div class="product_thumbnail">
          <img alt="Thumbnail" src="TARUH_URL_GAMBAR_DISINI" width="800" height="800"/>
        </div>
        <div class="product_title">
          TULIS JUDUL DISINI
        </div>
        <div class="product_price">
          TULIS HARGA DISINI
        </div>
        <a class="buy_now_button" href="TARUH_LINK_DISINI" rel="nofollow noopener noreferer" target="_blank">
          Beli Sekarang
        </a>
      </div>

    </div>
  </div>
</div>

Jika Anda ingin melaporkan beberapa bug, Anda dapat menulisnya di bagian komentar halaman Laporkan Bug dan jika Anda ingin meminta fitur baru atau ingin memberikan umpan balik, silakan tulis di bagian komentar di halaman Request dan Feedback.

#Dokumentasi #Widget

Spaceback UI

Spaceback UI - Komponen Template

Product Showcase

Produk Default

Produk Shopee

Produk Tokopedia