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] -->

Penjelasan :

• #URL-FOTO-PRODUK Adalah URL Foto Produk, Usahakan ukuran foto lebar dan tingginya 700px x 700px / 300px 300px – Lihat contoh ukuran gambarnya disini
• content=”205000″
  Ganti angka 205000 dengan harga produk tanpa tanda [,] Koma | [.] Titik
• Rp.205.000
  Ganti angkanya dengan harga produk menggunakan simbol mata uang [Rp].
• <div class="harga-tetap">Rp200.000</div> – Jika produk memiliki potongan Harga, maka edit angka [Rp200.000] dan jangan dihapus.
• <i class="fa fa-star"></i> – Ini adalah icon bintang nilai riview Produk, Jika ingin menambahkan / menggurangi jumlah bintang, silahkan hapus <i class="fa fa-star"></i> | tambahkan. Icon menggunakan FontAwesome.

Cara Membuat Kode HTML Otomatis Tersimpan di Blogger

Agar kode HTML otomatis tersimpan di blogger, Anda perlu menyalin kode HTML diatas ke dalam pengaturan Template Entri. Lebih jelasnya bisa baca lebih lanjut.

Nanti kode HTML produk akan tersimpan di blogger secara permanen saat Anda ingin membuat postingan produk terbaru, Caranya silahkan ikuti secara teliti dibawah ini.

Buka Blogger > Setelan / Pengaturan > Postingan, komentar dan berbagi > Template Entri > Tambahkan > Paste kode HTML produk dalam kolom.

Lalu klik ” Simpan Setelan ” untuk menyimpan pengaturan.

Nanti hasilnya akan seperti contoh gambar dibawah ini, Jika Anda ingin membuat postingan produk terbaru lagi dan tidak perlu lagi melakukan penyalinan kode HTML secara manual.

Cukup memberi judul produk, ganti URL foto, status produk, harga produk dan info produk. Anda tidak perlu lagi menyalin kode HTML post jika menggunakan cara ini.

Pertanyaan Lainnya

• Harga produk kok gak muncul? > Postingan harus di kasih label / kategori dan tidak diubah ke format ” Compose ” harus tetap HTML.
• Foto produk blur / tidak jernih? > Upload foto produk harus di penyimpanan blogger dan ukuran harus 500px, jangan mengambil URL foto di luar Blogger | Google.