Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Setting Template Terbaru Viomagz versi 4.8

Viomagz menjadi salah satu template blog yang sekarang ini banyak digunakan oleh para blogger di Indonesia. Selain visualnya yang simple dan menarik, template ini juga responsive. Jadi, tak heran jika template ini sudah menjadi template favorite semua orang.

Cara Setting Template Terbaru Viomagz versi 4.8

Template buatan Mas Sugeng ini juga fast loading, yang membuat pengunjung jadi nyaman ketika sedang mengunjungi blog. Template ini pertama kali dirilis pada tahun 2018 versi satunya. Sekarang ini, template Viomagz sudah mendapatkan update hingga versi 4.8.

Jika kamu menggunakan template versi 4.8, tentu kamu akan kebingungan dengan settingannya. Berbeda dengan versi-versi sebelumnya yang cara men-settingnya menggunakan kode html. Pada versi 4.8 ini, Mas Sugeng mempermudah kita dalam mengatur templatenya tanpa harus mengotak atik kode html. Bagaimana cara men-settingnya? Berikut penjelasannya yang dikutip dari laman web sugeng.id.

Memasang Template

Seperti memasang template pada umumnya, kamu perlu mengekstrak terlebih dahulu file zip yang telah kamu unduh. File tersebut di dalamnya terdapat file berbentuk .xml. 

Ada dua cara untuk memasang template blog

Cara yang pertama yaitu dengan menyalin kode yang terdapat di file xml dan meletakkannya ke dalam tema melalui edit html. Cara ini terbilang cukup rumit dan harus mengahapus semua kode template lama agar tidak mengalami error pada template yang akan diganti.

Cara Kedua yaitu dengan meng-upload langsung file xml ke dalam blog melalui tema > pulihkan. Sebelum meng-upload filenya, kamu direkomendasikan backup terlebih dahulu template lama kamu. Cara ini cocok untuk kamu yang sebelumnya menggunakan template yang sama.

Menambah Menu dan Submenu Navigasi

Untuk menambah menu dan submenu navigasi, langkah pertama yang harus kamu lakukan yaitu masuk ke Tata Letak lalu edit widget Kode Menu Navigasi. Masukan kode di bagian konten widget.

Menambah Menu Navigasi (Header)

<li><a href="#">Contoh Menu</a></li>

Ubah tanda # dengan URL tujuan. Misalnya jika kamu ingin menunya mengarah ke postingan, maka cukup salin URL postingan kamu, kemudian ganti tanda # menjadi URL.

Ganti juga Contoh Menu sesuai keinginan kamu.

Jika kamu ingin menambahkan menu lagi, kamu cukup salin kodenya dan letakkan di bawahnya.

Menambah Menu dengan submenu

Jika kamu ingin menambah 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>
Letakkan itu tepat di bawah kode menu yang sebelumnya.

Ganti tanda # dengan URL tujuan, dan Ganti nama menu sesuai kebutuhan kamu.

Menampilkan Menu Halaman Statis

Cara menampilkan menu halaman statis kamu cukup masuk ke Tata Letak > edit widget Menu Halaman Statis Add News Item > Pilih Halaman yang ingin kamu tambahkan > klik Simpan.

Menambah Icon Media Sosial

Masuk ke Tata Letak > edit widget Icon Media Sosial > masukkan kode berikut 
<a aria-label="instagram-icon" href="#"><span class="sosial-icon instagram-icon"><i></i></span></a>
Edit tulisan instagram-icon dengan nama media sosial yang kamu gunakan dan edit tanda # dengan URL sosial media milik kamu.

Jika kamu ingin memasang media sosial lebih dari satu, kamu cukup salin kode tersebut dan edit bagian nama icon media sosialnya.

Berikut daftar nama icon 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
Catatan: nama icon harus ditulis menggunakan huruf kecil semua.

Mengedit Kode Pengaturan Template

Masuk ke Tata Letak > edit widget Kode Pengaturan Template > masukkan kode berikut
<script>
var vioMagzSetting = {
   relatedPosts: true,
   jumlahRelatedPosts: 6,
   relatedPostsThumb: true,
   numberedPageNav: true,
   perPage: 5,
   bacaJuga: true,
   jumlahBacaJuga: 2,
   jumlahBacaJuga: "Baca Juga",
};
</script>
Berikut penjelasan dari kode di atas
  • relatedPosts: Isi true untuk mengaktifkan fitur related post, atau isi false untuk menonaktifkannya.
  • jumlahRelatedPosts: Jumlah postingan yang muncul di related post di bawah artikel. 
  • relatedPostsThumb: Isi true jika kamu ingin menampilkan related posts dengan thumbnail, isi false jika kamu tidak ingin menampilkan posts dengan thumbnail.
  • numberPageNav: Isi true jika kamu ingin menampilkan fitur navigasi halaman bernomor, atau isi false jika kamu ingin menonaktifkannya.
  • perPage: Samakan angkanya dengan setelan jumlah postingan yang dimunculkan di homepage blog kamu.
  • bacaJuga: Isi true jika kamu ingin menampilkan fitur related posts di tengah artikel, atau isi false jika kamu ingin menonaktifkannya.
  • jumlahBacaJuga: Jumlah postingan yang muncul di related posts di tengah artikel, edit sesuai selera kamu.
  • jumlahBacaJuga: Judul related posts di tengah artikel.  Edit sesuai selera kamu.

Mengganti Judul Blog dengan Gambar

Pastikan kamu sudah memiliki gambar yang ingin kamu gunakan. Untuk caranya, masuk ke Tata Letak > edit widget Header > unggah gambar > di bagian penempatan pilih selain judul dan keterangan > klik simpan.

Mengedit Tulisan di Footer

Masuk ke Tata Letak > edit widget Teks Footer > di bagian konten masukkan tulisan sesuai keinginan uang akan dimunculkan si footer > simpan.

Menampilkan/Menyembunyikan Label, Tanggal, Komentar, Dll

Masuk ke Tata Letak > edit widget postingan blog > centang yang ingin kamu tampilkan, hilangkan centang yang tidak ingin kamu tampilkan > simpan.

Mengaktifkan LazyLoad pada Iklan Adsense

Fitur ini hanya bisa aktifkan di template Viomagz versi 4.6 ke atas. Cara mengaktifkannya cukup mudah, kamu bisa ikuti tutorial berikut ini.
 
Kode adsense umumnya berbentuk kode seperti berikut:
<script async src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>
Kamu 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

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 tesebut di atas kode </head> atau bisa juga melalui Tata Letak > edit widget Custom Javascript Footer > simpan.

Note: 
  • Ganti 1234567890xxxxxx dengan ID akun adsense kamu.
  • Jangan letakkan kodenya di bawah kode <head>. Jika di letakkan di situ, fitur lazyload tidak akan aktif/tidak berfungsi.
  • Fitur lazyload hanya berfungsi jika akun adsense tidak terhubung dengan dashboard blogger.