Panduan Setting Template VioToko versi Terbaru v.1.4

Di bawah ini adalah panduan cara pemasangan dan pengaturan template toko online premium VioToko. Silakan dibaca dan diikuti dengan teliti agar templatenya terpasang dengan baik dan benar.

Memasang Template

Hal pertama yang perlu dilakukan tentu saja memasang template yang sudah dibeli ke blog milik sobat.

Berikut langkah-langkahnya:

#1. Pertama pastikan sobat sudah meng-unzip file template yang didownload. Di dalam file .zip terdapat file berekstensi .xml, nah file tersebut yang akan diupload atau pasang ke blog.

#2. Kedua saya merekomendasikan untuk melakukan backup template yang akan diganti.

Caranya:

Login ke “Blogger” > Masuk ke menu “Tema”
Klik “Backup / Pulihkan”
Klik “Download tema”

#3. Selanjutnya sobat tinggal mengupload file template ke blog.

Caranya:

Login ke “Blogger” > Masuk ke menu “Tema”
Klik “Backup / Pulihkan”
Klik “Choose File”
Pilih file template di Komputer > Klik “Upload”

#4. Template sudah berhasil terpasang.

Mengedit Menu Navigasi

Untuk mengedit kedua menu navigasi sobat harus mengeditnya melalui menu Edit HTML.

Cari kode ini di dalam kode template:

<!-- menu navigasi header start -->
<ul>
  <li><a href='#'>Menu</a></li>
  <li><a href='#'>Menu</a></li>
  <li><a href='#'>Menu</a></li>
  <li><a href='#'>Menu</a>
  <ul>
	<li><a href='#'>SubMenu1</a></li>
	<li><a href='#'>SubMenu2</a></li>
	<li><a href='#'>SubMenu3</a></li>
  </ul>
  </li>
  <li><a href='#'>Menu</a>
  <ul>
	<li><a href='#'>SubMenu1</a></li>
	<li><a href='#'>SubMenu2</a></li>
	<li><a href='#'>SubMenu3</a></li>
	<li><a href='#'>SubMenu4</a></li>
  </ul>
  </li>
</ul>
<!-- menu navigasi header end -->

Edit text dengan background berwarna merah dengan URL tujuan dan warna hijau dengan nama menu yang diinginkan.

Menghapus Menu
Untuk menghapus salah satu menu cukup hapus dari kode <li> sampai </li>. Misalnya ingin menghapus menu “SubMenu4” maka hapus kode :
```
<li><a href='#'>SubMenu4</a></li>
```
Menambah menu
Untuk menambahkan menu, copy kode ini:
```
<li><a href='#'>NamaMenu</a></li>
```
Paste kode tersebut di atas kode :
```
</ul>

```

Menambah Menu dengan SubMenu
Untuk menambahkan menu dengan submenu, copy kode ini :

<li><a href='#'>NamaMenu</a>
  <ul>
	<li><a href='#'>NamaSubMenu1</a></li>
	<li><a href='#'>NamaSubMenu2</a></li>
  </ul>
</li>

Paste kode tersebut di atas kode :

</ul>
<!-- menu navigasi header end -->

Jangan lupa sesuaikan URL tujuan menu dan Nama menunya.

Cara Posting Produk

Untuk posting produk langkah-langkahnya sama seperti posting artikel, bedanya untuk posting produk memerlukan kode HTML khusus yang diletakan di dalam artikel.

Silakan disimak caranya berikut ini:

Login ke “Blogger” > klik “Entri Baru“
Pada editor artikel pilih mode “HTML“

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.
  (cara upload gambar ke blogger baca di sini)
- 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“

Cara Posting Artikel

Cara posting artikel prosesnya sama seperti posting produk, hanya saja tidak memerlukan kode HTML khusus.

Tapi ada satu langkah penting yang perlu sobat lakukan saat posting artikel, yaitu memberi label “Artikel” pada artikel yang sobat posting.

Caranya sebagai berikut:

Login ke “Blogger” > “Entri Baru“
Isi judul dan dan konten artikel
Pada bagian label isi dengan label “Artikel” (tanpa tanda kutip + harus diawalai dengan huruf besar)
Jika sudah, klik “Publikasikan“

Mengedit Nomor WhatsApp dan Nomor HP

Pada halaman produk terdapat tiga informasi kontak yang bisa dihubungi calon pembeli. Informasi kontak tersebut adalah Nomor WhatsApp, Nomor SMS, dan Nomor Telepon.

Untuk mengedit Nomor WhatsApp caranya:

Cari kode ini di dalam template:

<a class='chat-wa' href='https://api.whatsapp.com/send?phone=6282111111111' target='_top'>
<i aria-hidden='true' class='fa fa-whatsapp'/> Chat WhatsApp
</a>

Edit yang bertanda merah dengan nomor WhatsApp milik sobat (nomor harus diawali dengan kode negara 62)
Klik “Simpan tema“

Untuk mengedit Nomor SMS caranya:

Cari kode ini di dalam template:

<a class='chat-sms' href='sms:082111111111' target='_top'>
<i class='fa fa-paper-plane' aria-hidden='true'></i> <b:switch var='data:blog.locale'><b:case value='id' />Kirim SMS<b:default />Send SMS</b:switch>
</a>

Edit yang bertanda merah dengan nomor untuk menerima SMS
Klik “Simpan tema“

Untuk mengedit Nomor Telepon caranya:

Cari kode ini di dalam template:

<a class='chat-phone' href='tel:082111111111' target='_top'>
<i class='fa fa-phone' aria-hidden='true'></i> <b:switch var='data:blog.locale'><b:case value='id' />Telpon<b:default />Call</b:switch>
</a>

Edit yang bertanda merah dengan nomor untuk menerima panggilan telpon
Klik “Simpan tema“

Memasang Gambar Banner di Atas Daftar Produk

Untuk memasang gambar banner di bawah menu navigasi caranya sangatlah mudah.

Login ke “Blogger” > “Tata Letak” > klik “Tambahkan gadget” di atas “Posting blog”
Pilih Gadget “Gambar“
Masukan judul dengan dan juga keterangan gambar. Untuk keterangan gambar bisa diisi dengan deskripsi toko online atau bisa juga dengan ucapan selamat datang.
Pada bagian “Susutkan agar sesuai” jangan dicentang
Pilih file gambar banner di komputer sobat. Jika belum punya, silakan bisa menggunaka gambar banner ini.
Jika sudah, klik “Simpan“
NOTE : Gambar minimal memiliki lebar di atas 900px, untuk tinggi bebas.

Memasang Widget Artikel Terbaru

Secara default, postingan dengan label “Artikel” disembunyiakan pada halaman depan supaya tidak muncul bercampur dengan daftar produk.

Jika sobat ingin menampilkan daftar artikel terbaru di halaman depan, sobat bisa memasang widget artikel terbaru di bagian widget di atas footer.

Berikut langkah-langkahnya:

Login ke “Blogger” > “Tata Letak” > klik “Tambahkan gadget” di atas Footer
Pilih Gadget “HTML/JavaScript“
Pada bagian judul isi sesuai keinginan, misalnya “Daftar Artikel” atau “Artikel Terbaru“

Pada bagian konten isi dengan kode ini:

<div class='artikel-terbaru'>
<script>
function artikelterbaru(e){document.write("<ul>");for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length&&"alternate"!=e.feed.entry[t].link[r].rel;r++);var n="<li><a href="+("'"+e.feed.entry[t].link[r].href+"'")+'">'+e.feed.entry[t].title.$t+"</a> </li>";document.write(n)}document.write("</ul>")}
</script>
<script src="/feeds/posts/summary/-/Artikel?max-results=5&alt=json-in-script&callback=artikelterbaru"></script>
</div>

Jika sudah, klik “Simpan“
NOTE : Yang bertanda merah adalah jumlah artikel yang dimunculkan, silakan dirubah sesuai keinginan.

Modifikasi Tampilan Template

Sobat bisa dengan mudah mengganti warna, background, dan juga font pada template toko online ini melalui menu Desainer Tema Blogger.

Caranya:

Login ke “Blogger” > Masuk ke menu “Tema”
Klik tombol “Sesuakan”
Setelah itu klik “Tingkat Lanjut”
Pada menu tersebut sobat bisa merubah font, background dan juga warna template sesuai keinginan.