Panduan Setting Template Vio Toko

Hai sobat setelah kemarin saya share beberapa template untuk jualan online nah kini saya akan share bagaimana cara seting template viotoko terutama cara ubah gambarnya, dan pastikan untuk edit template ini gunakan PC yah jangan Hp. kemudian sudah terisntal aplikasi edit gambar seperti potoshop, corel paint dan lain lain. maksudnya untuk nanti edit gambar anda.

Langkah Pertama

Silahkan anda login ke Blogger :
Login ke “Blogger” > klik “Entri Baru“
Pada editor artikel pilih mode “HTML“

Langkah Kdeua

Setelah itu paste kode ini pada bagian konten :

<div class="gambar-produk">
<div class="gambar-slide">
<img alt="gambar produk 1" src="URL-GAMBAR-1" />
<img alt="gambar produk 2" src="URL-GAMBAR-2" />
<img alt="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-3
    Ganti 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
  • Rp.3.150.000
    Ganti 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>

• Jika sudah, klik “Publikasikan“

Nah demikianlah cara seting template viotoko semoga bermanfaat. namun jika anda ingin tutprial bentuk vidio agar mudah di pahami silahkan download melalui link berikut : "Tutorial Setting Viotoko"

Share this post