Cara Membuat Postingan Produk Template 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:

  • Login ke “Blogger” > klik “Postingan” > “Entri Baru
  • Pada editor artikel pilih mode “HTML
  • Setelah itu paste kode HTML dibawah ini pada bagian halaman artikel :
<!-- GAMBAR PRODUK DAN STATUS -->
<div class="gambar-produk" itemscope="" itemtype="http://schema.org/ImageObject">
<img alt="Text judul gambar produk" src="URL_GAMBAR_PRODUK1" class="slider-image"/>
<img alt="Text judul gambar produk" src="URL_GAMBAR_PRODUK2" class="slider-image"/>
<img alt="Text judul gambar produk" src="URL_GAMBAR_PRODUK3" class="slider-image"/>

<button class="prev1" onclick="plusDivs(-1)">&#10094;</button>
<button class="next1" onclick="plusDivs(+1)">&#10095;</button>

<!-- STATUS PRODUK DAN LABEL DISKON & PROMO -->
<div class="status-produk">
<div class="promo">55% Off 
</div>
</div>
</div>
</div>

<!-- DATA HARGA PRODUK DAN DESKRIPSI -->
<div class="detail-produk" itemprop="offers" itemscope="" itemtype="https://schema.org/Offer">
<div content="IDR" itemprop="priceCurrency"></div>
<div class="harga-produk" content="205000" itemprop="price">Rp.205.000</div>
</div>

<!-- RATING BINTANG -->
<div class="rating-produk" itemprop="aggregateRating" itemscope="" itemtype="https://schema.org/AggregateRating">
<span class="skor" itemprop="ratingValue">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half"></i> 3.5</span>
<span class="rating" itemprop="reviewCount">11</span>
</div>

<!-- DESKRIPSI PRODUK -->
<div class="detail-produk">
<table>
<tbody>
<tr><td colspan="2"><b>Product Details</b></td> </tr>
<tr><td>Product Code</td><td>702583</td></tr>
<tr><td>Types of products</td><td>Local</td></tr>
<tr><td>Weight</td><td>250 grams</td></tr>
<tr><td>Description</td><td><b>All Size</b><br />P = 60 cm<br />L = 46 cm</td></tr>
<tr><td>Material</td><td>Spandek Rayon</td></tr>
<tr><td>Stock</td><td><div class="item_stock"><a href="https://schema.org/InStock" itemprop="availability">In Stock</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>

<!-- PENJELASAN / KETERANGAN PRODUK -->
<div class="deskripsi-produk">
<section class="tabs">  <input checked="checked" class="tab-selector-1" id="tab-1" name="radio-set" type="radio" />  
<label class="tab-label-1" for="tab-1">Description</label>  
<input class="tab-selector-2" id="tab-2" name="radio-set" type="radio" />  
<label class="tab-label-2" for="tab-2">Tentang Brand</label>  
<input class="tab-selector-3" id="tab-3" name="radio-set" type="radio" />  
<label class="tab-label-3" for="tab-3">Catatan</label>  
<div class="content">

<!-- TULISAN PERTAMA -->
<div class="content-1">
Contoh tulisan Anda / Penjelasan Produk
</div>
<!-- TULISAN KEDUA -->
<div class="content-2">
Contoh tulisan kedua tentang produk Anda
</div>
<!-- TULISAN KETIGA -->
<div class="content-3">
Contoh tulisan ketiga tentang produk Anda / Catatan produk yang Anda jual
</div>
</div>
</section>
</div>

Tips :

  • #URL_GAMBAR_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.
  • <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.

Rian SEO

View posts by Rian SEO
Blogger dari kalimantan selatan yang sudah lama berposisi sebagai penulis online dan memberikan berbagai macam informasi, trik, internet dan dunia blogging, Jika ada pertanyaan jangan malu untuk mengirim pesan kepada saya!
Scroll to top