› Cara Menambahkan Produk
BLANTERTOKOv130

Cara Menambahkan Produk

  1.  Copy lalu Paste pada Blogger > Setelan > Postingan, komentar, berbagi > Template Entri.

<div class='produk-wrap'>
<div class='kolom-gambar'>
<div class='flexslider'>
<ul class='slides'>
<!-- ============= KOLOM GAMBAR ================= -->
<li><img id='gambar' src='#LINK-GAMBAR' alt='Product'/></li>
<li><img src='#LINK-GAMBAR' alt='Product'/></li>
<li><img src='#LINK-GAMBAR' alt='Product'/></li>
<!-- ============= KOLOM GAMBAR ================= -->
</ul></div>
<div class="status-produk">
<!-- ============= STATUS PRODUK ================= -->
<div class="promo">Promo</div>
<div class="produk-terlaris">Terlaris</div>
<div class="stok-habis">Stok Habis</div>
<!-- ============= STATUS PRODUK ================= -->
</div>
<!-- ============= DISCOUNT ================= -->
<div class='discount'>-40%</div>
<!-- ============= DISCOUNT ================= -->
</div>
<div class='kolom-info'>
<h3 id='title'>
<!-- ============= JUDUL PRODUK ================= -->
Setelan Jas Hitam Pria Casual/Formal Lengkap
<!-- ============= JUDUL PRODUK ================= -->
</h3>
<div content="IDR" itemprop="priceCurrency"></div>
<!-- ============= HARGA PRODUK ================= -->
<div class="harga-produk" content="779400" itemprop="price">
<strike>Rp. 1.299.000</strike><br/>
<span id='harga'>Rp 779.400</span>
</div>
<!-- ============= HARGA PRODUK ================= -->
<br/>
<div class='pilihan'>
<div class='input-field'>
<input id='jumlah' type="number" name="quantity" min="1" max="99" value='1'/>
<label>Jumlah</label>
</div>
<!-- ============= PILIHAN OPSI PRODUK 1 ================= -->
<select id="pilihan-1">
  <option hidden='hidden' selected='selected' value='default'>Varian Warna</option>
  <option value="1">Hitam</option>
  <option value="2">Putih</option>
</select>
<!-- ============= PILIHAN OPSI PRODUK 2 ================= -->
<select id="pilihan-2">
  <option hidden='hidden' selected='selected' value='default'>Ukuran</option>
  <option value="1">M</option>
  <option value="2">L</option>
  <option value="3">XL</option>
</select>
<div class='input-field'>
<textarea id='product-desc' placeholder='' maxlength='60' row='1'></textarea>
<label>Catatan Untuk Penjual</label>
</div>
<br/>
<a id='love' href='javascript:void' title='Add Wishlist'><i class='fas fa-heart'></i><span> Add Wishlist</span></a>
<a id='next_order' href='javascript:void' title='Beli Sekarang'><i class="fas fa-shopping-cart"></i> Beli Sekarang</a>
</div>
<div class='deskripsi-produk'>
<!-- ============= DESKRIPSI PRODUK ================= -->
<table><tbody>
<tr><td colspan="2"><b>Product Details</b></td></tr>
<tr><td>Nama Produk</td><td>Hoodie</td></tr>
<tr><td>Made In</td><td>Local</td></tr>
<tr><td>Weight</td><td>250 grams</td></tr>
<tr><td>Varian</td><td>All Size</td></tr>
  <tr><td>Bahan</td><td>Berkualitas</td></tr>
</tbody></table><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor facilisis nisl sit amet venenatis. Proin dolor orci, imperdiet at ante eu, lobortis aliquam erat. Nulla commodo consectetur arcu, ut fermentum nisl feugiat sed. Nunc interdum vulputate tincidunt. Nulla ac urna erat. Sed sit amet nisi lacus. Pellentesque ut ligula ut nisl accumsan fermentum et a ex. Nullam finibus condimentum nisl vel dignissim. Nulla in enim in nulla auctor ultrices sed non dolor.
<!-- ============= DESKRIPSI PRODUK ================= -->
</div>
</div>
</div>


  • Cara Memasukkan Gambar Produk
Ubah "LINK-GAMBAR" menjadi link gambar produk anda, untuk defaultnya hanya ada 3 slot untuk tempat gambar, jika dirasa gambar produk yang dimasukkan kurang silahkan salin lalu tempel code  dibawah untuk memperbanyak slot gambar produk anda. 

Untuk menempelkan codenya harus tetap berada di dalam "KOLOM GAMBAR"

<li><img src='#LINK-GAMBAR' alt='Product'/></li>

<!-- ============= KOLOM GAMBAR ================= -->
<li><img id='gambar' src='#LINK-GAMBAR' alt='Product'/></li>
<li><img src='#LINK-GAMBAR' alt='Product'/></li>
<li><img src='#LINK-GAMBAR' alt='Product'/></li>
<!-- ============= KOLOM GAMBAR ================= -->
Untuk bagaimana cara ambil link gambar produk kita silahkan klik link dibawah
https://teratoko.blogspot.com/p/cara-ambil-link-gambar.html

  • Status Produk
Untuk status produk dari awal sudah ada 3 yaitu Promo, Terlaris, dan Stok Habis. Jika ada yang ingin tidak digunakan tinggal anda hapus codenya dari "<div class" sampai "</div>"

<!-- ============= STATUS PRODUK ================= -->
<div class="promo">Promo</div>
<div class="produk-terlaris">Terlaris</div>
<div class="stok-habis">Stok Habis</div>
<!-- ============= STATUS PRODUK ================= -->


  • Atur Diskon Produk Anda
Ubah jumlah diskon sesuai dengan keperluan anda, caranya ubah 40% menjadi sesuai keinginan anda.

Dan kalau tidak ingin ada diskon silahkan code dibawah ini anda hapus

<div class='discount'>-40%</div>


<!-- ============= DISCOUNT ================= -->
<div class='discount'>-40%</div>
<!-- ============= DISCOUNT ================= -->


  • Menambakan Judul Produk
Silahkan ubah kalimat Setelan Jas Hitam Pria Casual/Formal Lengkap dengan  Nama/Judul Produk anda

<!-- ============= JUDUL PRODUK ================= -->
Setelan Jas Hitam Pria Casual/Formal Lengkap
<!-- ============= JUDUL PRODUK ================= -->


  • Setting Harga Produk Anda
           : silahkan isi dengan harga produk anda ( harga setelah diskon )
           : untuk harga awal sebelum di diskon ( kalau tidak ada diskon silahkan dihapus saja)
<!-- ============= HARGA PRODUK ================= -->
<div class="harga-produk" content="779400" itemprop="price">
<strike>Rp. 1.299.000</strike><br/>
<span id='harga'>Rp 779.400</span>
</div>
<!-- ============= HARGA PRODUK ================= --

  • Setting Minimal Pembelian dan Maximal Pembelian
         : Minimal Pembelian
         : Maximal Pembelian
<br/>
<div class='pilihan'>
<div class='input-field'>
<input id='jumlah' type="number" name="quantity" min="1" max="99" value='1'/>
<label>Jumlah</label>
</div>


  • Setting Opsi Produk Anda
Maksud dari opsi ini adalah, jika produk anda ada beberapa pilihan seperti warna, ukuran, corak, dan kapasitas.

          : Ubah dengan Judul Varian Produk Anda
          : Ubah Dengan beberapa Varian Produk Yang tersedia

<!-- ============= PILIHAN OPSI PRODUK 1 ================= -->
<select id="pilihan-1">
  <option hidden='hidden' selected='selected' value='default'>Varian Warna</option>
  <option value="1">Hitam</option>
  <option value="2">Putih</option>
</select>
<!-- ============= PILIHAN OPSI PRODUK 2 ================= -->
<select id="pilihan-2">
  <option hidden='hidden' selected='selected' value='default'>Ukuran</option>
  <option value="1">M</option>
  <option value="2">L</option>
  <option value="3">XL</option>


  • Isi Deskripsi Untuk Produk Anda
          : Ubah dengan deskripsi produk anda

<!-- ============= DESKRIPSI PRODUK ================= -->
<table><tbody>
<tr><td colspan="2"><b>Product Details</b></td></tr>
<tr><td>Nama Produk</td><td>Hoodie</td></tr>
<tr><td>Made In</td><td>Local</td></tr>
<tr><td>Berat</td><td>250 grams</td></tr>
<tr><td>Varian</td><td>All Size</td></tr>
  <tr><td>Bahan</td><td>Berkualitas</td></tr>
</tbody></table><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor facilisis nisl sit amet venenatis. Proin dolor orci, imperdiet at ante eu, lobortis aliquam erat. Nulla commodo consectetur arcu, ut fermentum nisl feugiat sed. Nunc interdum vulputate tincidunt. Nulla ac urna erat. Sed sit amet nisi lacus. Pellentesque ut ligula ut nisl accumsan fermentum et a ex. Nullam finibus condimentum nisl vel dignissim. Nulla in enim in nulla auctor ultrices sed non dolor.
<!-- ============= DESKRIPSI PRODUK ================= -->

Catatan Untuk Deskripsi produk

Untuk menambah Enter atau baris baru : <br/>

Untuk menebalkan teks gunakan : <b> teks </b>

Untuk memiringkan teks gunakan : <i> teks </i>

Untuk menggunakan teks besar (heading) gunakan : <h3> teks </h3>