Memasang Template
Ada dua cara yang bisa digunakan untuk memasang template ke blog.1. Cara pertama adalah dengan menyalin kode template yang baru dan meletakannya ke blog secara manual lewat menu Tema > edit HTML.
Metode ini direkomendasikan jika blog sobat mengganti template blog yang lama dengan template lain yang berbeda. Alasan menggunakan metode ini adalah supaya kode template yang lama tidak tercampur dengan yang baru, hal ini untuk menghindari terjadinya error.
2. Cara kedua adalah dengan cara meng-upload langsung file template ke blog melalui menu Tema > Pulihkan.
Metode ini direkomendasikan jika blog sobat memasang template versi terbaru dari template yang sama. Di bawah ini saya jelaskan cara pemasangan template menggunakan kedua metode tersebut:
#1 Metode Memasang Kode Template Manual:
#1. File yang sudah didownload harus di-unzip dulu. Di dalam file .zip terdapat file berekstensi .xml, nah kita perlu menyalin semua kode yang ada di dalam file tersebut.
#2. Buka file template yang berekstensi .xml menggunakan program teks editor dan salin semua kode di dalamnya.
#3. Saya merekomendasikan untuk melakukan backup template yang akan diganti.
Caranya:
Login ke “Blogger” > Masuk ke menu “Tema”. Klik icon menu (titik tiga) di sebelah kanan atas. Klik “Cadangkan”. Klik “Download“
#4. Setelah dibackup, selanjutnya sobat tinggal letakan kode yang sudah disalin ke blog melalui menu edit HTML.
Caranya:
Login ke “Blogger” > Masuk ke menu “Tema”. Klik icon menu (titik tiga) di sebelah kanan atas. Klik “Edit HTML“. Hapus semua kode template yang lama. Paste/Tempelkan kode template yang baru. Klik tombol Simpan.
#5. Template sudah berhasil terpasang.
#2 Metode Upload Langsung:
#1. File yang sudah didownload harus di-unzip dulu. Di dalam file .zip terdapat file berekstensi .xml, nah file tersebut yang akan diupload langsung ke blog.
#2. Kedua saya merekomendasikan untuk melakukan backup template yang akan diganti. Caranya sama seperti metode pertama.
#3. Selanjutnya sobat tinggal mengupload file template ke blog.
Caranya:
Login ke “Blogger” > Masuk ke menu “Tema”. Klik icon menu (titik tiga) di sebelah kanan atas. Klik “Pulihkan“. Klik “Upload”. Pilih file template yang ada di Komputer
#4. Template sudah berhasil terpasang.
Cara Posting Produk
Caranya:
- Login ke “Blogger” > Buat Postingan baru
- Pada editor postingan pilih mode “HTML”
- Setelah itu letakkan kode ini pada bagian konten :
<div class="gambar-produk">
<div class="gambar-slide">
<img alt="Gambar Produk" src="URL-GAMBAR-1" />
<img alt="Gambar Produk 2" src="URL-GAMBAR-2" />
</div>
<div class="status-produk">
<div class="promo">Promo</div>
<div class="produk-terlaris">Terlaris</div>
<div class="stok-habis">Stok Habis</div>
</div>
</div>
<div class="detail-produk">
<div class="harga-produk"><strike>Rp200.000</strike> Rp150.000</div>
</div>
<div class="deskripsi-produk">
Deskripsi produk di sini...
</div>
<meta content="150000" itemprop="price"/>- URL-GAMBAR-1, URL-GAMBAR-2
- Untuk menghilangkan keterangan stok habis, hapus kode:
<div class="stok-habis">Stok Habis</div>- Untuk menghilangkan keterangan promo, hapus kode:
<div class="promo">Promo</div>- Untuk menghilangkan keterangan terlaris, hapus kode:
<div class="produk-terlaris">Terlaris</div>- <strike>Rp200.000</strike>
- Rp150.000
- Deskripsi produk di sini…
- content=”150000″
- Jika sudah, klik “Publikasikan“
Cara Posting Artikel
- Blog
- Artikel
- Articles
Note:
- Nama label harus sama persis, diawali huruf besar.
- Postingan artikel akan ikut muncul di homepage. Supaya tidak muncul di homepage, atur tanggal postingan artikelnya lebih lama dari tanggal postingan produk.
- Template VioToko tidak dioptimalkan untuk posting artikel biasa. Saran saya jangan terlalu banyak memposting artikel.
- Masuk ke menu “Tata Letak”
- Klik edit pada Widget Menu Navigasi
- Setelah itu masukan kode ini:
<li><a href="#">Contoh Menu</a></li>Menambah menu dengan submenu
Untuk menambahkan menu disertai dengan submenu, gunakan kode ini:
<li class="has-sub"><a href="#">Menu Utama</a>
<ul>
<li><a href="#">Submenu Satu</a></li>
<li><a href="#">Submenu Dua</a></li>
<li><a href="#">Submenu Tiga</a></li>
</ul>
</li>Menambah Icon Media Sosial
- Masuk ke menu “Tata Letak“
- Klik edit pada Widget Icon Media Sosial
- Masukan kode ini di bagian konten widget:
<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>Silakan edit yang bertanda merah dengan URL akun media sosial milik sobat. Untuk menghapus salah satu icon media sosial, cukup hapus dari kode <a sampai </a>. Misalnya ingin menghapus icon instagram, maka cukup hapus kode ini :
<a aria-label="instagram" href="#"><span class="social-icon instagram-icon"><i></i></span></a>Mengedit Kode Pengaturan Template
- Masuk ke menu “Tata Letak“
- Klik edit pada Widget Kode Pengaturan Template
- Masukan kode ini di bagian konten widget:
<script>
var vioTokoSetting = {
relatedPosts: true,
jumlahRelatedPosts: 4,
relatedPostsThumb: true,
sliderLoop: true
};
</script>Berikut penjelasan dari kode tersebut:
- relatedPosts (Isi true untuk mengaktifkan fitur related posts, atau isi false untuk menonaktifkannya.)
- jumlahRelatedPosts (Jumlah postingan yang muncul di related posts di bawah postingan, edit sesuai selera.)
- relatedPostsThumb (Isi true untuk menampilkan related posts dengan thumbnail, atau isi false untuk menampilkan related posts tanpa thumbnail.)
- sliderLoop (Isi true untuk mengaktifkan mode loop pada slider gambar produk, atau isi false untuk menonaktifkannya.)
Mengedit Kode Pengaturan Call-to-Action
- Masuk ke menu “Tata Letak“
- Klik edit pada Widget Kode Pengaturan Call-to-Action
- Masukan kode ini di bagian konten widget:
<script>
var vioTokoCta = {
judulCTA : true,
teksJudulCTA : "Order Sekarang :",
tombolWA : true,
nomorWA : "6285000000000",
teksPesanWA : "Halo Bosku. Saya mau pesan",
tombolSMS : true,
nomorSMS : "085000000000",
teksPesanSMS : "Halo Kak. Saya mau pesan",
tombolTelpon : true,
nomorTelpon : "085000000000",
};
</script>Berikut penjelasan dari kode tersebut:
- judulCTA (Isi true untuk menampilkan judul di atas tombol Call-to-Action. Isi false untuk menyembunyikannya.)
- teksJudulCTA (Teks judul di atas tombol Call-to-Action. Edit sesuai selera.)
- tombolWA (Isi true untuk menampilkan tombol WhatsApp. Isi false untuk menyembunyikannya.)
- nomorWA (Isi dengan nomor WhatsApp milik sobat. (Harus diawali dengan 628, bukan 08))
- teksPesanWA (Teks yang otomatis muncul ketika pembeli melakukan chat melalui WhatsApp. Edit sesuai selera.)
- tombolSMS (Isi true untuk menampilkan tombol SMS. Isi false untuk menyembunyikannya.)
- nomorSMS (Isi dengan nomor untuk menerima SMS.)
- teksPesanSMS (Teks yang otomatis muncul ketika pembeli melakukan SMS. Edit sesuai selera.)
- tombolTelpon (Isi true untuk menampilkan tombol telpon. Isi false untuk menyembunyikannya.)
- nomorTelpon (Isi dengan nomor untuk menerima panggilan telpon.)
Memasang Widget Logo Jasa Pengiriman
- Masuk ke menu “Tata Letak“
- Klik edit pada Widget Logo Jasa Pengiriman
- Masukan kode ini di bagian konten widget:
<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>- Terakhir klik “Simpan“
#1. Menghapus Logo yang Tidak Digunakan
Sobat bisa menghapus beberapa kode logo pengiriman yang tidak dibutuhkan. Misalnya jika ingin menghapus logo wahana, maka cukup hapus kode:
<span class='pengiriman wahana'></span>Hapus dari kode <span sampai dengan /span>
#2. Menambah Logo Pengiriman Sendiri
Jika sobat ingin menambahkan logo pengiriman milik sendiri, silakan salin kode ini:
<span class='pengiriman' style='background-image:url(URL-GAMBAR);width:95px;'></span>Ganti URL-GAMBAR dengan URL gambar yang ingin sobat gunakan. Letakan kode tersebut pada kolom konten widget yang sudah dipasang sebelumnya.
Memasang Widget Logo Pembayaran
- Masuk ke menu “Tata Letak”
- klik “Tambahkan gadget” di atas Footer
- Pilih Gadget “HTML/JavaScript“
- Masukan kode ini di bagian konten widget:
<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>- Terakhir klik “Simpan“
#1. Menghapus Logo yang Tidak Digunakan
Sobat bisa menghapus beberapa kode logo pembayaran yang tidak dibutuhkan. Misalnya jika ingin menghapus logo OVO, maka cukup hapus kode:
<span class='pembayaran ovo'></span>Hapus dari kode <span sampai dengan /span>
Posting Komentar