Untuk posting produk langkah-langkahnya sama seperti posting artikel, bedanya untuk posting produk memerlukan kode HTML khusus yang diletakan di dalam artikel.
Berikut Langkah-langkahnya :
Login ke “Blogger” > klik “Entri Baru“
Pada editor artikel pilih mode “HTML“
Setelah itu paste semua kode dan / atau edit kode yang diberi tanda merah pada bagian HTML :
<div class="gambar-produk">
<div class="gambar-slide">
<img alt="nama gambar produk 1" src="URL-GAMBAR-1" />
<img alt="nama gambar produk 2" src="URL-GAMBAR-2" />
<img alt="nama gambar produk 3" src="URL-GAMBAR-3" />
</div>
<button class="prev">Prev</button>
<button class="next">Next</button>
<div class="status-produk">
<div class="stok-habis">Stok Habis</div>
<div class="promo">Promo</div>
<div class="produk-terlaris">Terlaris</div>
</div>
</div>
<div class="detail-produk" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
<div content="IDR" itemprop="priceCurrency"></div>
<div class="harga-produk" content="3150000" itemprop="price">Rp3.150.000</div>
</div>
<div class="deskripsi-produk">
Deskripsi produk di sini...
</div>
Keterangan :
Berikut Langkah-langkahnya :
Login ke “Blogger” > klik “Entri Baru“
Pada editor artikel pilih mode “HTML“
Setelah itu paste semua kode dan / atau edit kode yang diberi tanda merah pada bagian HTML :
<div class="gambar-produk">
<div class="gambar-slide">
<img alt="nama gambar produk 1" src="URL-GAMBAR-1" />
<img alt="nama gambar produk 2" src="URL-GAMBAR-2" />
<img alt="nama gambar produk 3" src="URL-GAMBAR-3" />
</div>
<button class="prev">Prev</button>
<button class="next">Next</button>
<div class="status-produk">
<div class="stok-habis">Stok Habis</div>
<div class="promo">Promo</div>
<div class="produk-terlaris">Terlaris</div>
</div>
</div>
<div class="detail-produk" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
<div content="IDR" itemprop="priceCurrency"></div>
<div class="harga-produk" content="3150000" itemprop="price">Rp3.150.000</div>
</div>
<div class="deskripsi-produk">
Deskripsi produk di sini...
</div>
Keterangan :
- URL-GAMBAR-1, URL-GAMBAR-2, URL-GAMBAR-3Ganti dengan URL gambar produk, usahakan gambar diupload di blogger, bukan dari tempat lain. Rekomendasi ukuran gambar menggunakan aspek rasio 4:5, misalnya jika lebar gambar 300px, maka tingginya adalah 375px.
- content=”315000″Ganti angka 315000 dengan harga produk tanpa pemisah koma/titik dan juga tanpa simbol mata uang
- Rp3.150.000Ganti angkanya dengan harga produk menggunakan simbol mata uang dan pemisah ribuan.
- Deskripsi produk di sini…Ganti dengan deskripsi produk
- Untuk menambah harga dicoret, tambahkan kode <strike>HARGA</strike> di depan harga. Kurang lebih jadinya seperti ini :<strike>Rp.4.000.000</strike> Rp.3.150.000
- Untuk menghilangkan keterangan stok habis, hapus kode ini :<div class="stok-habis">Stok Habis</div>
- Untuk menghilangkan keterangan promo, hapus kode ini :<div class="promo">Promo</div>
- Untuk menghilangkan keterangan terlaris, hapus kode ini :<div class="produk-terlaris">Terlaris</div>
- Kemudian klik kompose untuk menyesuaikan teks deskripsi produk supaya lebih mudah dan enak di baca
- Jika sudah, klik “Publikasikan/Dijadwalkan/Disimpan“
Tag :
Panduan Web Olshop WA
