Pengaturan Template VioToko

Panduan lengkap untuk mengatur template VioToko setelah dipasang di blog Anda.

Prasyarat

Pastikan Anda sudah memahami dasar-dasar Blogger seperti membuat postingan, halaman statis, dan memasang widget. Panduan ini fokus pada pengaturan template, bukan tutorial Blogger dari awal.

Daftar Pengaturan

Pengaturan	Deskripsi
Kode Pengaturan	Konfigurasi fitur template
Pengaturan CTA	Tombol WhatsApp/Chat
Posting Produk	Cara membuat postingan produk
Posting Artikel	Cara membuat postingan artikel
Menu Navigasi	Menu di header
Icon Sosmed	Link ke akun media sosial
Logo Pengiriman	JNE, J&T, SiCepat, dll
Logo Pembayaran	BCA, Mandiri, GoPay, dll

---

Kode Pengaturan Template

Fitur-fitur template VioToko bisa dikustomisasi menggunakan kode pengaturan.

Cara Membuat & Memasang

1. Buat kode pengaturan di Tool Generator VioToko
2. Copy kode yang dihasilkan
3. Buka Tata Letak di dashboard Blogger
4. Cari widget "Kode Pengaturan Template" → klik Edit
5. Paste kode di bagian Konten
6. Klik Simpan

---

Pengaturan Tombol Call-to-Action

Tombol CTA (WhatsApp, Chat, dll) diatur terpisah dari pengaturan template.

Cara Membuat & Memasang

1. Buat kode CTA di Tool Generator CTA VioToko
2. Copy kode yang dihasilkan
3. Buka Tata Letak
4. Cari widget "Kode Pengaturan Call-to-Action" → klik Edit
5. Paste kode di bagian Konten
6. Klik Simpan

---

Cara Posting Produk

Postingan produk di VioToko berbeda dengan postingan biasa — harus menggunakan kode HTML khusus.

Langkah-langkah Posting Produk

1. Siapkan URL gambar produk

   • Upload gambar terlebih dahulu
   • Lihat panduan: Cara Upload Gambar

2. Buat kode HTML produk di Tool Posting VioToko

3. Buat postingan baru

   • Buka dashboard Blogger → Postingan baru
   • Klik mode HTML di editor (bukan Compose)
   • Paste kode HTML yang sudah dibuat
   • Klik Publikasikan

---

Cara Posting Artikel

Posting artikel caranya sama seperti posting biasa (tanpa kode HTML khusus).

Syarat Posting Artikel

Tambahkan salah satu label berikut:

Label Valid
Blog
Artikel
Articles

Perhatikan

• Nama label harus sama persis (huruf besar di awal)
• Postingan artikel akan muncul di homepage — atur tanggal lebih lama dari produk jika tidak ingin muncul
• Template VioToko tidak dioptimalkan untuk banyak artikel

---

Memasang Menu Navigasi

1. Buat kode menu di Tool Generator Menu
2. Copy kode yang dihasilkan
3. Buka Tata Letak
4. Cari widget "Kode Menu Navigasi" → klik Edit
5. Paste kode di bagian Konten
6. Klik Simpan

---

Memasang Icon Media Sosial

1. Buka Tata Letak
2. Cari widget "Icon Media Sosial" → klik Edit
3. Paste kode berikut di bagian Konten:

<a aria-label="facebook" href="#"><span class="social-icon facebook-icon"><i></i></span></a>

<a aria-label="twitter" href="#"><span class="social-icon twitter-icon"><i></i></span></a>

<a aria-label="youtube" href="#"><span class="social-icon youtube-icon"><i></i></span></a>

<a aria-label="instagram" href="#"><span class="social-icon instagram-icon"><i></i></span></a>

<a aria-label="linkedin" href="#"><span class="social-icon linkedin-icon"><i></i></span></a>

<a aria-label="whatsapp" href="#"><span class="social-icon whatsapp-icon"><i></i></span></a>

<a aria-label="googlemaps" href="#"><span class="social-icon googlemaps-icon"><i></i></span></a>

<a aria-label="telegram" href="#"><span class="social-icon telegram-icon"><i></i></span></a>

<a aria-label="pinterest" href="#"><span class="social-icon pinterest-icon"><i></i></span></a>

4. Ganti tanda # dengan URL akun media sosial Anda
5. Klik Simpan

Icon yang Tersedia

Platform	aria-label
Facebook	facebook
Twitter/X	twitter
YouTube	youtube
Instagram	instagram
LinkedIn	linkedin
WhatsApp	whatsapp
Google Maps	googlemaps
Telegram	telegram
Pinterest	pinterest

Menghapus Icon yang Tidak Digunakan

Hapus baris kode dari <a sampai </a> untuk icon yang tidak dibutuhkan.

Contoh: Menghapus icon Instagram:

<!-- Hapus baris ini -->
<a aria-label="instagram" href="#"><span class="social-icon instagram-icon"><i></i></span></a>

---

Memasang Widget Logo Jasa Pengiriman

1. Buka Tata Letak
2. Cari widget "Logo Jasa Pengiriman" → klik Edit
3. Paste kode berikut di bagian Konten:

<span class='pengiriman gosend'></span>
<span class='pengiriman grab'></span>
<span class='pengiriman jne'></span>
<span class='pengiriman jdant'></span>
<span class='pengiriman posindonesia'></span>
<span class='pengiriman tiki'></span>
<span class='pengiriman sicepat'></span>
<span class='pengiriman wahana'></span>
<span class='pengiriman indah'></span>
<span class='pengiriman herona'></span>
<span class='pengiriman pandu'></span>
<span class='pengiriman dakota'></span>

4. Klik Simpan

Logo yang Tersedia

Logo	Kode Class
GoSend	gosend
Grab	grab
JNE	jne
J&T	jdant
Pos Indonesia	posindonesia
TIKI	tiki
SiCepat	sicepat
Wahana	wahana
Indah Cargo	indah
Herona	herona
Pandu Logistics	pandu
Dakota	dakota

Menghapus Logo yang Tidak Digunakan

Hapus baris kode dari <span sampai </span> untuk logo yang tidak dibutuhkan.

Contoh: Menghapus logo Wahana:

<!-- Hapus baris ini -->
<span class='pengiriman wahana'></span>

Menambah Logo Pengiriman Custom

Jika jasa pengiriman tidak tersedia, gunakan kode berikut:

<span class='pengiriman' style='background-image:url(URL-GAMBAR);width:95px;'></span>

Ganti URL-GAMBAR dengan URL gambar logo yang diinginkan.

---

Memasang Widget Logo Pembayaran

1. Buka Tata Letak
2. Klik Tambahkan gadget di atas Footer
3. Pilih gadget HTML/JavaScript
4. Paste kode berikut di bagian Konten:

<span class='pembayaran bca'></span>
<span class='pembayaran bcasyariah'></span>
<span class='pembayaran bni'></span>
<span class='pembayaran bri'></span>
<span class='pembayaran brisyariah'></span>
<span class='pembayaran btpn'></span>
<span class='pembayaran cimb'></span>
<span class='pembayaran cimbsyariah'></span>
<span class='pembayaran dana'></span>
<span class='pembayaran gopay'></span>
<span class='pembayaran mandiri'></span>
<span class='pembayaran mandirisyariah'></span>
<span class='pembayaran ovo'></span>
<span class='pembayaran paypal'></span>
<span class='pembayaran permata'></span>

5. Klik Simpan

Logo Pembayaran yang Tersedia

Kategori	Logo
Bank Konvensional	BCA, BNI, BRI, BTPN, CIMB, Mandiri, Permata
Bank Syariah	BCA Syariah, BRI Syariah, CIMB Syariah, Mandiri Syariah
E-Wallet	DANA, GoPay, OVO
Internasional	PayPal

Menghapus Logo yang Tidak Digunakan

Hapus baris kode dari <span sampai </span> untuk logo yang tidak dibutuhkan.

Contoh: Menghapus logo OVO:

<!-- Hapus baris ini -->
<span class='pembayaran ovo'></span>