Panduan Lengkap Setting Template VioMagz v.4.6.0
Di bawah ini adalah panduan cara pemasangan serta pengaturan template VioMagz versi terbaru.
Memasang Template
Ada dua metode yang bisa digunakan untuk memasang template ke blog.
- Metode pertama adalah dengan menyalin kode template baru dan meletakannya ke blog secara manual lewat menu Tema > edit HTML.
Metode ini direkomendasikan jika blog sobat mengganti template blog yang berbeda. Alasannya untuk menghindari terjadinya error karena kode template lama tercampur dengan yang baru.
- Metode 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:
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 (misal: notepad) dan salin semua kode di dalamnya.
#3. Saya merekomendasikan untuk melakukan backup template yang akan diganti.
Masuk ke menu “Tema” > Klik icon menu (titik tiga) > “Cadangkan” > “Download“
#4. Setelah dibackup, selanjutnya sobat tinggal letakan kode yang sudah disalin ke blog melalui menu edit HTML.
Masuk ke menu “Tema” > Klik icon menu (titik tiga) > Klik “Edit HTML” > Hapus semua kode template yang lama > Paste/Tempelkan kode template yang baru > Klik tombol Simpan.
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, lakukan backup template yang akan diganti. Caranya sama seperti metode pertama.
#3. Selanjutnya sobat tinggal mengupload file template ke blog.
Masuk ke menu “Tema” > Klik icon menu (titik tiga) > Klik “Pulihkan” > Klik “Upload” > Pilih file template yang ada di Komputer.
Masuk ke menu “Tata Letak” > edit widget “Kode Menu Navigasi” > setelah itu masukan kode ini di bagian konten widget:
<li><a href="#">Contoh Menu</a></li>Ganti yang bertanda merah dengan URL tujuan, misalnya jika ingin menunya mengarah ke halaman label, maka isi dengan URL label.
Yang bertanda hijau juga diganti sesuai dengan keinginan.
Jika ingin menambahkan menu lagi, cukup salin kodenya dan letakan tepat di bawahnya.
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>Letakan kode tersebut tepat di bawah kode menu yang sebelumnya.
Ganti yang bertanda merah dengan URL tujuan, dan yang berwana hijau diganti dengan nama menu sesuai kebutuhan.
Masuk ke “Tata Letak” > edit widget “Menu Halaman Statis” > centang halaman-halaman yang ingin ditampilkan di menu > klik “Simpan“
Menambah Icon Media Sosial
Masuk ke “Tata Letak” > edit widget “icon media sosial” > masukkan kode ini di bagian konten widget:
<a aria-label="facebook-icon" href="#"><span class="social-icon facebook-icon"><i></i></span></a>
Edit yang bertanda hijau dengan nama icon media sosial yang digunakan dan yang bertanda merah dengan URL akun media sosial milik sobat.
Jika ingin memasang icon media social lebih dari satu, cukup salin kode tersebut dan ubah bagian nama icon media sosialnya.
Berikut beberapa nama icon media sosial yang tersedia di template VioMagz:
- facebook-icon
- youtube-icon
- twitter-icon
- instagram-icon
- linkedin-icon
- telegram-icon
- whatsapp-icon
- googlemaps-icon
- pinterest-icon
- tiktok-icon
- github-icon
- dribbble-icon
- behance-icon
Note:
Nama icon harus ditulis huruf kecil semua.
Mengedit Kode Pengaturan Template
Beberapa fitur pada template dapat diatur melalui widget “Kode Pengaturan Template” yang tersedia di tata letak.
Untuk mengeditnya silakan masuk ke menu “Tata Letak” > edit widget “Kode Pengaturan template“.
Setelah itu sobat masukkan kode ini di bagian konten widget:
<script>
var vioMagzSetting = {
relatedPosts: true,
jumlahRelatedPosts: 4,
relatedPostsThumb: true,
numberedPageNav: true,
perPage: 8,
bacaJuga: true,
jumlahBacaJuga: 3,
judulBacaJuga: "Baca Juga",
};
</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. - numberedPageNav
Isi true untuk mengaktifkan fitur navigasi halaman bernomor. atau isi false untuk untuk menonaktifkannya. - perPage
Samakan angkanya dengan setelan jumlah postingan yang dimunculkan di homepage - bacaJuga
Isi true untuk mengaktifkan fitur related posts di tengah postingan, atau isi false untuk menonaktifkannya. - jumlahBacaJuga
Jumlah postingan yang muncul di related posts di tengah postingan, edit sesuai selera. - judulBacaJuga
Judul related posts di tengah postingan, edit sesuai selera.
Mengganti Judul Blog dengan Logo
Pertama, pastikan sudah membuat gambar logonya. Ukuran logo bebas, berapa saja bisa.
Kedua, masuk ke “Tata Letak” > edit widget “Header” > Upload gambar > di bagian “Penempatan” pilih “Selain judul dan keterangan” > Simpan.
Masuk ke “Tata Letak” > edit widget “Teks Footer” > di bagian konten widget masukkan tulisan apa saja yang ingin dimunculkan di footer > simpan.
Mengganti Favicon
Masuk ke menu “Setelan” > “Dasar” > “Favicon” > Upload favicon milik sobat.
Note:
- Pastikan gambar favicon persegi dan ukurannya tidak lebih dari 100KB.
- Jika Favicon tidak berubah di browser, clear cache browser dulu setelah itu cek lagi
- Jika Favicon tidak berubah di Google, harap bersabar, butuh waktu tidak bisa otomatis berubah.
Menampilkan/Menyembunyikan Label, Tanggal, Komentar, Dll.
Masuk ke “Tata Letak” > edit widget “Postingan Blog” > centang yang ingin ditampilkan, hilangkan centang yang tidak ingin ditampilan > Simpan.
Mengaktifkan LazyLoad pada Iklan AdSense
Di template VioMagz versi 4.6.0 ke atas sobat bisa mengaktifkan fitur LazyLoad pada iklan AdSense.
Cara mengaktifkannya cukup mudah, sobat hanya perlu mengedit sedikit kode iklan AdSense yang terpasang di blog.
Pada setiap kode iklan AdSense umumnya terdapat kode seperti ini di bagian atas:
<script async src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>Nah sobat hanya perlu mengedit kode tersebut menjadi seperti ini :
<script>Defer.js('https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', 'adsense', 3000);</script>Untuk Iklan Auto Ads
Fitur LazyLoad ini juga bisa diterapkan pada iklan auto ads.
Caranya cukup ubah kode iklan auto ads-nya menjadi seperti ini:
<script>Defer.js('https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890xxxxxx', 'adsense', 3000);</script>Letakkan kode tersebut di atas kode </head> atau bisa juga di widget “Custom JavaScript Footer“
Note:
- Ganti 1234567890xxxxxx dengan ID akun AdSense sobat
- Jangan letakkan kodenya di bawah kode <head>. Jika diletakkan di situ, fitur lazyload tidak bisa berfungsi.