Cara Membuat Postingan Produk Template Tokopedia

 Sangat disarankan untuk membaca panduan ini, untuk tidak mendapatkan kekeliruan dalam membuat postingan produk di Template blogger mirip tokopedia.

Untuk membuat postingan produk langkah-langkahnya sama seperti posting artikel, bedanya hanya saja dibagian kode HTML khusus yang diletakan di dalam artikel.

Silakan disimak caranya berikut ini dengan teliti :

• Login ke ” Blogger ” > klik ” Postingan ” > ” Entri Baru “
• Pada editor artikel pilih mode ” HTML ” bukan ” Compose “
• Setelah itu paste kode HTML dibawah ini semuanya, pada bagian halaman artikel 

<!--=== ⚠️ [BACA DULU] - JANGAN DIRUBAH MODE POSTINGAN KE " Compose " HARUS TETAP DALAM MODE " HTML " ⚠️ ===-->

<!--============ 📦 AREA GAMBAR PRODUK ============-->
<div class="gambar-produk">
<!--============ 📷 GANTI GAMBAR LINK [#URL-FOTO-PRODUK-1] GAMBAR KE 1 | GANTI TEXT ALT SESUAI JUDUL POST [ alt='Judul Produk' ]-->
<a href="#URL-FOTO-PRODUK-1"><img alt="Judul Produk" class="lazyload item_thumb slider-image" src="#URL-FOTO-PRODUK-1" /></a>
<!--============ 📷 GANTI GAMBAR LINK [#URL-FOTO-PRODUK-2] ============-->
<a href="#URL-FOTO-PRODUK-2"><img alt="Judul Produk" class="lazyload slider-image" src="#URL-FOTO-PRODUK-2" /></a>
<!--============ 📷 GANTI GAMBAR LINK [#URL-FOTO-PRODUK-3] ============-->
<a href="#URL-FOTO-PRODUK-3"><img alt="Judul Produk" class="lazyload slider-image" src="#URL-FOTO-PRODUK-3" /></a>

<!--============ ◀️ ▶️ FUNGSI TOMBOL UNTUK GAMBAR [JANGAN DI EDIT] | APABILA PRODUK HANYA 1 GAMBAR HAPUS KODE INI ============-->
<button class="prev1" onclick="plusDivs(-1)">❮</button>
<button class="next1" onclick="plusDivs(+1)">❯</button>

<!--============ 📌 STATUS PRODUK | HABIS | DISKON | FREE ONGKIR ============-->
<div class="status-produk">
<div class="freeOngkir">Cashback</div> <!--=== ⬅️ EDIT TEXT 💥[OFF 50%] SESUAI DISKON-->
<div class="stok-habis">Habis</div> <!--=== ⬅️ EDIT TEXT 💥[Habis] | HAPUS JIKA TIDAK DIPERLUKAN-->
</div>
</div>

<!--============ 💰 TEXT ANGKA HARGA PRODUK ============-->
<div class="detail-produk" itemscope="" itemtype="https://schema.org/Offer">
<div content="IDR">
<div class="harga-tetap">Rp200.000</div> <!--=== ⬅️ EDIT TEXT ANGKA HARGA CORET 💰 | HAPUS-->
<div class="item_price" content="775000">Rp75.000</div> <!--=== ⬅️ EDIT TEXT ANGKA HARGA 💰 -->
</div>
</div>

<!--============ 🌟 ICON BINTANG / RATING | ICON FontAwesome ============-->
<div class="rating-produk" itemscope="" itemtype="https://schema.org/AggregateRating">
<span class="skor">
<i class="fa fa-star"></i> <!--=== 🌟 ICON BINTANG 1 -->
<i class="fa fa-star"></i> <!--=== 🌟 ICON BINTANG 2 -->
<i class="fa fa-star"></i> <!--=== 🌟 ICON BINTANG 3 -->
<i class="fa fa-star"></i> <!--=== 🌟 ICON BINTANG 4 -->
<i class="fa fa-star"></i> 4.5 <!--=== 🌟 [5.0] NILAI RATING DISARANKAN > [ 1.0 s/d 5.0 ] -->
</span>
<span class="rating">24</span> <!--=== 🌟 [24] NILAI RATING PRODUK -->
</div>

<!--============ 📗 AREA INFORMASI PRODUK ============-->
<div class="detail-produk">

<!--============ 📦 PILIHAN UKURAN | MODEL ============-->
<ul class="opsi-produk" id="Ukuran"> <!--=== ⬅️ EDIT TEXT [Ukuran]===-->
<li>1</li> <!--=== ⬅️ EDIT ANGKA [1] | SESUAI UKURAN PRODUK YANG ADA-->
<li>2</li>
<li>3</li>
</ul>
<!--============ 🐉 PILIHAN WARNA PRODUK ============-->
<ul class="opsi-produk" id="Warna"> <!--=== ⬅️ EDIT TEXT [Warna]===-->
<li>Orange</li> <!--=== ⬅️ EDIT TEXT [Orange] | SESUAI WARNA PRODUK YANG ADA-->
<li>Kuning</li>
</ul>

<!--============ 📁 DETAIL PRODUK | BERAT | KONDISI | ASURANSI | BARANG ASAL ============-->
<div class="data-produk">
<small>Info Produk</small><!--=== ⬅️ EDIT TEXT [Info Produk]===-->

<!--============ 📍 BERAT PRODUK ============-->
<div class="pin">
<br />
<dt>Berat</dt> <!--=== ⬅️ EDIT TEXT [Berat]-->
<dd><b>1000Ton</b></dd> <!--=== ⬅️ EDIT TEXT [1000Ton]-->
</div>

<!--============ 📍 KONDISI PRODUK ============-->
<div class="pin">
<br />
<dt>Kondisi</dt> <!--=== ⬅️ EDIT TEXT [Kondisi]-->
<dd><b>Baru</b></dd> <!--=== ⬅️ EDIT TEXT [Baru]-->
</div>

<!--============ 📍 ASURANSI PRODUK ============-->
<div class="pin">
<br />
<dt>Asuransi</dt> <!--=== ⬅️ EDIT TEXT [Asuransi]-->
<dd><b>Opsional</b></dd> <!--=== ⬅️ EDIT TEXT [Opsional]-->
</div>

<!--============ 📍 BARANG | PRODUK ASAL ============-->
<div class="pin">
<br />
<dt>Barang</dt> <!--=== ⬅️ EDIT TEXT [Barang]-->
<dd><b>Banjarmasin</b></dd> <!--=== ⬅️ EDIT TEXT [Banjarmasin]-->
</div>
</div>
</div>

<!-- ============ 📂 PENJELASAN PRODUK ============-->
<div class="deskripsi-produk">
<section class="tabs">  
<input checked="checked" class="tab-selector-1" id="tab-1" name="radio-set" type="radio" />  

<!-- ============ 🌕 TAB DESKRIPSI 1 ============-->
<label class="tab-label-1" for="tab-1">Deskripsi</label>  <!--=== ⬅️ EDIT TEXT [Deskripsi]===-->

<!-- ============ 🌕 TAB ULASAN 2 ============-->
<input class="tab-selector-2" id="tab-2" name="radio-set" type="radio" />  
<label class="tab-label-2" for="tab-2">Ulasan</label>  <!--=== ⬅️ EDIT TEXT [Ulasan]===-->

<!-- ============ 🌕 TAB KETENTUAN ============-->
<input class="tab-selector-3" id="tab-3" name="radio-set" type="radio" />  
<label class="tab-label-3" for="tab-3">Ketentuan</label>  <!--=== ⬅️ EDIT TEXT [Ketentuan]===-->

<!-- ============ 🍀 AREA KONTENT TAB 1 SAMPAI 3 ============-->
<div class="content">

<div class="content-1">
<!-- ============ 🌕 PENJELASAN TAB 1 [TEXT HTML] ============-->
Text penjelasan | detail produk
</div>

<div class="content-2">
<!-- ============ 🌕 PENJELASAN TAB 2 [TEXT HTML] ============-->
Text ulasan | penjelasan lainnya
</div>

<div class="content-3">
<!-- ============ 🌕 PENJELASAN TAB 3 [TEXT HTML] ============-->
Text syarat & ketentuan produk
</div>

</div>
</section>
</div>
<!--==== SUPPORT | DUKUNGAN DARI ADMIN WA KE [085886624531] -->