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.

Login ke “Blogger” > Masuk ke menu “Tema” > Klik “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>
 <!-- menu navigasi header end -->

 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” (tanda 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:

 Login ke “Blogger” > “Tema” > “edit HTML“

 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:

 Login ke “Blogger” > “Tema” > “edit HTML“

 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:

 Login ke “Blogger” > “Tema” > “edit HTML“

 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].re
l;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.

Panduan Lainnya…

Panduan lainnya untuk template VioToko bisa dilihat di sini…

Pertanyaan Umum

 Tanya : Template ini apakah boleh digunakan di banyak blog?

Jawab : Boleh, silakan digunakan di banyak blog asalkan blognya masih blog milik
sendiri atau kerluarga satu rumah.
 Tanya : Apakah template ini boleh dijual lagi?
Jawab : Tidak boleh, template ini hanya untuk digunakan sendiri.
 Tanya : Bisakah saya meminta bantuan Mas Sugeng untuk memodifikasi template
ini?
 Jawab : Mohon maaf saya hanya memberikan support jika ada yang error atau
tidak paham. Jika ingin memodifikasi silakan dilakukan sendiri.
 Pertanyaan lainnya silaka