Panduan Setting Template VioMagz v.4.3.0

Di bawah ini adalah panduan cara pemasangan serta pengaturan template VioMagz versi terbaru dari Mas Sugeng.

Memasang Template

Hal pertama yang perlu dilakukan tentu saja memasang template yang sudah dibeli ke blog milik sobat.

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 supaya kode template yang lama tidak tercampur dengan yang baru, hal ini untuk menghindari terjadinya error.

• 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. Misalnya sebelumnya sobat menggunakan VioMagz versi 4.0.0 dan akan memasang versi 4.3.0, maka gunakan metode ini.

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 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.

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.

Menambah Menu Navigasi

Untuk menambahkan menu navigasi silakan sobat masuk ke menu “Tata Letak” > Klik edit pada widget menu navigasi > setelah itu masukan kode ini:

<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.

Menambah Icon Media Sosial

Untuk menambahkan icon media sosial silakan sobat masuk ke menu “Tata Letak” > Klik edit pada widget icon media sosial > setelah itu masukan kode ini:

<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

Beberapa fitur di template VioMagz bisa diatur menggunakan widget kode pengaturan yang tersedia di menu tata letak.

Untuk mengeditnya silakan masuk ke menu “Tata Letak” > klik edit pada Widget Kode Pengaturan template.

Setelah itu sobat masukan kode ini di bagian konten:

<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.

Modifikasi Tampilan Template

Sobat bisa dengan mudah mengganti warna, background, dan juga dimensi pada template ini melalui menu Desainer Tema Blogger.

Caranya:

• Login ke “Blogger” > Masuk ke menu “Tema” 
• Klik tombol “Sesuaikan”
• Setelah itu klik “Lanjutan”