Panduan Setting Template VioMagz versi Terbaru

Di bawah ini adalah panduan cara pemasangan serta pengaturan template blogger premium VioMagz versi terbaru 3.3.0.

Jika masih menggunakan versi lama, silakan unduh terlebih dahulu versi terbaru di halaman member area.

Memasang Template

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

Berikut langkah-langkahnya:

1. Unzip!

File yang sudah didownload harus di-unzip atau di-extract dulu. Di dalam file .zip terdapat file berekstensi .xml. Nah, file tersebut yang akan dipasang atau diupload ke blog.

2. Uupload file template

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

Menonaktifkan Tampilan Versi Seluler

Setelah template berhasil terpasang, langkah kedua yang perlu dilakukan adalah menonaktifkan tampilan versi seluler.

Hal ini dilakukan karena tampilan template viomagz sudah menggunakan desain responsive/mobile friendly, jadi tidak perlu menggunakan fitur tampilan versi seluler yang disediakan oleh blogger.com.

Untuk cara menonaktifkannya sebagai berikut:

Login ke “Blogger” > Masuk ke menu “Tema”
Klik icon menu (titik tiga) di sebelah kanan atas
Klik “Setelan seluler“
Pilih “Desktop“
Klik “Simpan“

Edit Menu Navigasi 

Pada template VioMagz terdapat dua menu navigasi. Menu Navigasi pertama terletak di sebelah kanan Header, dan yang kedua terletak di atas Footer.

Kedua menu navigasi tersebut sobat harus mengeditnya melalui menu Edit HTML.

Untuk mengedit menu navigasi yang pertama berikut langkah-langkahnya:

Login ke “Blogger” > Masuk ke menu “Tema”
Klik icon menu (titik tiga) di sebelah kanan atas
Klik “Edit HTML”

Cari kode ini di dalam kode template:

<!-- menu navigasi header start -->
<ul> <li><a href='#'>Menu 1</a></li>
 <li><a href='#'>Menu 2</a>
</li> <li><a href='#'>Menu 3</a>
 <ul> <li><a href='#'>SubMenu 1</a></li>
 <li><a href='#'>SubMenu 2</a></li>
 </ul>
 </li>
 </ul>
<!-- menu navigasi header end -->

Ganti yang ditandai warna merah dengan URL tujuan dan yang ditandai warna hijau dengan nama menu yang diinginkan.

#1. Menghapus Menu

Untuk menghapus salah satu menu cukup hapus dari kode <li> sampai </li>.

Misalnya ingin menghapus menu “SubMenu 2” maka hapus kode :

<li><a href='#'>SubMenu 2</a></li>

#2. Menambah menu

Untuk menambahkan menu, copy kode ini:

<li><a href='#'>NamaMenu</a></li>

Paste kode tersebut di atas kode :</ul> <!-- menu navigasi header end -->

#3. Menambah Menu dengan SubMenu

Untuk menambahkan menu dengan submenu, copy kode ini :

<li><a href='#'>NamaMenu</a> <ul>
 <li><a href='#'>NamaSubMenu1</a></li>
 <li><a href='#'>NamaSubMenu2</a></li>
 </ul>
</li>

Paste kode tersebut di atas kode :</ul> <!-- menu navigasi header end -->

Mengedit Menu Navigasi Kedua

Menu navigasi yang kedua letaknya di atas footer. Untuk cara mengeditnya silakan ikuti langkah-langkahnya di bawah:

Masuk ke menu Tema > edit HTML
Cari kode ini di dalam kode template:

<!-- menu navigasi footer start -->
<ul> <li><a href='#'>About</a></li>
 <li><a href='#'>Contact</a></li>
 <li><a href='#'>Privacy Policy</a></li>
 <li><a href='#'>Disclaimer</a></li>
</ul>
<!-- menu navigasi footer end -->

Ganti yang ditandai warna merah dengan URL tujuan dan yang berwarna hijau dengan nama menu yang diinginkan.

Untuk menghapus dan menambah menu caranya sama seperti menu pertama, hanya bedanya untuk menu navigasi yang kedua ini tidak support submenu.

Jika sudah diedit semua, jangan lupa klik simpan perubahan dengan mengklik icon simpan di bagian kanan bawah.

Mengedit Link Tombol Media Sosial

Di template viomagz terdapat 5 tombol / icon media sosial yang diletakan di atas footer.

Sobat perlu mengedit link dari masing-masing tombol media sosial tersebut.

Berikut langkah-langkahnya:

#1. Mengganti link facebook

Masuk ke menu Tema > edit HTML
Cari kode ini di dalam kode template:

<a aria-label='facebook' class='fb-s' href='https://www.facebook.com/' rel='noopener nofollow' target='_blank'>

Ganti https://www.facebook.com/ dengan URL profil ataupun URL fanspage milik sobat.

#2 Mengganti link instagram

Masuk ke menu Tema > edit HTML
Cari kode ini di dalam kode template:

<a aria-label='instagram' class='ig-s' href='https://www.instagram.com/' rel='noopener nofollow' target='_blank'>

Ganti https://www.instagram.com/ dengan URL akun instagram milik sobat.

#3 Mengganti link twitter

Masuk ke menu Tema > edit HTML
Cari kode ini di dalam kode template:

<a aria-label='twitter' class='tw-s' href='https://twitter.com/' rel='noopener nofollow' target='_blank'>

Ganti https://twitter.com/ dengan URL akun twitter milik sobat.

#4 Mengganti link LinkedIn

Masuk ke menu Tema > edit HTML
Cari kode ini di dalam kode template:

<a aria-label='linkedin' class='ld-s' href='https://linkedin.com' rel='noopener nofollow' target='_blank'>

Ganti https://linkedin.com dengan URL akun linkedin milik sobat.

#5 Mengganti link youtube

Masuk ke menu Tema > edit HTML
Cari kode ini di dalam kode template:

<a aria-label='youtube' class='yt-s' href='https://youtube.com' rel='noopener nofollow' target='_blank'>

Ganti https://youtube.com dengan URL channel youtube milik sobat.

Menambahkan Widget Featured Post

Untuk memasang widget Featured Post caranya sangatlah mudah.

Caranya:
Login ke “Blogger” > Masuk ke menu “Tata Letak”
Klik “Tambahkan Gadget” tepat di atas Posting Blog
Pilih Gadget “Entri yang Diunggulkan”

Setelah itu tinggal pilih artikel mana yang ingin ditampilkan pada Featured Post
Jika sudah, klik “Simpan”

Modifikasi Tampilan Template

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

Caranya:

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

Pada menu tersebut sobat bisa merubah background dan juga warna template sesuai keinginan.

Memasang Widget Artikel Terbaru

Untuk memasang widget artikel terbaru silakan ikuti langkah-langkah berikut:

Login ke “Blogger” > “Tata Letak” > klik “Tambahkan gadget“
Pilih Gadget “HTML/JavaScript“
Pada bagian judul isi sesuai keinginan, misalnya “Daftar Artikel“
Pada bagian konten isi dengan kode ini:

<div class='artikel-terbaru'> <script> function artikelterbaru(e){document.write("<ul>");for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length&&"alternate"!=e.feed.entry[t].link[r].rel;r++);var n="<li><a href="+("'"+e.feed.entry[t].link[r].href+"'")+'">'+e.feed.entry[t].title.$t+"</a> </li>";document.write(n)}document.write("</ul>")} </script> <script src="/feeds/posts/summary/?max-results=5&alt=json-in-script&callback=artikelterbaru"></script> </div>

Jika sudah, klik “Simpan“!

NOTE : Yang bertanda merah adalah jumlah artikel yang dimunculkan, silakan dirubah sesuai keinginan.

Menampilan Kotak Berlangganan FeedBurner

Template ini sudah tersedia fitur kotak berlangganan via email menggunakan feedburner, tapi secara default tidak ditampilkan.

Untuk menampilkannya silakan ikuti langkah-langkah berikut:

Login ke “Blogger” > Masuk ke menu “Tema”
Klik icon menu (titik tiga) di sebelah kanan atas
Klik “Edit HTML”
Cari kode ini :

<b:include data='post' name='relatedpost'/>

Jika ketemu, tambahkan kode ini tepat di bawahnya :

<b:include data='post' name='postsubscribebox'/>

Selanjutnya cari kode ini :

https://feedburner.google.com/fb/a/mailverify?uri=BlogMasSugeng

Ganti yang saya tandai merah dengan ID FeedBurner milik sobat

Selanjutnya cari lagi kode ini :

<input name='uri' type='hidden' value='BlogMasSugeng'/>

Ganti yang saya tandai merah dengan ID FeedBurner milik sobat
Terakhir jangan lupa Simpan perubahan.

Pertanyaan sering ditanyakan

Artikel Terkait Tidak Muncul?

Pastikan tampilan versi seluler pada menu Tema dinonaktifkan seperti yang sudah dijelaskan di atas.

Jika tetap tidak muncul, coba masuk ke menut Setelan > Lainnya > Izinkan feed blog > Pilih “Penuh” > Simpan setelan

Komentar Tidak Muncul

Pastikan tampilan versi seluler pada menu Tema dinonaktifkan seperti yang sudah dijelaskan di atas.

Pastikan setelan komentar tidak disembunyikan. Masuk ke menu Setelan > Postingan, komentar, dan berbagi > Lokasi komentar > pilih “Tersemat”

Pastikan juga komentar tidak dinonaktifkan pada setelan postingan. Edit postingan yang komentarnya tidak muncul, pada bagian setelan komentar pembaca di kanan bawah centang “Izinkan”

Cara Gambar Postingan Rata Kanan Kiri di Mobile

Edit postingan yang gambarnya ingin dibuat rata kanan dan kiri menggunakan mode HTML.

Pada tag <img>, tambahkan attribute class=”fullwidth”

Cara Memasang Iklan di Tengah Artikel

Pertama login ke “Blogger” > “Tata Letak“
Pada bagian bawah posting blog terdapat 4 widget untuk memasang kode iklan. Widget tersebut adalah :

Iklan Atas Artikel
Iklan Tengah Artikel 1
Iklan Tengah Artikel 2
Iklan Bawah Artikel

Klik edit pada widget-widget tersebut dan letakan kode iklannya.

Widget tersebut tidak harus digunakan semuanya. Jika sobat hanya ingin menampilkan iklan di bawah artikel, maka cukup letakan kode iklannya pada widget Iklan Bawah Artikel.

Cara Mengatur Lokasi Iklan Di Tengah Artikel Sesuai Keinginan

Widget iklan di tengah artikel secara otomatis menampilkan iklan di tengah postingan.

Iklan di tengah artikel pertama muncul di sekitar 20% awal postingan, sedangkan iklan yang kedua muncul tepat di tengah artikel.

Sobat juga bisa mengatur lokasi munculnya iklan sesuai keinginan di setiap postingan. Caranya sebagai berikut:

Untuk iklan di tengah artikel yang pertama salin kode ini:

<br id="iklan1"/>

Setelah disalin, edit postingan menggunakan mode HTML, setelah itu letakan kode di atas pada lokasi yang inginkan, misalnya di akhir paragraf pertama.

Nanti iklannya akan muncul menyesuikan dengan lokasi kode tersebut.

Untuk iklan yang kedua caranya sama, cukup rubah iklan1 menjadi iklan2

Cara Merubah Style Thumbnail Postingan

Pada VioMagz versi 3.2 ke atas terdapat dua model tampilan thumbnail postingan yang bisa dipilih. Kedua model tersebut adalah tampilan full width dan tampilan normal (thumbnail kecil).

Kedua model tersebut hanya berlaku untuk tampilan pada layar seluler. Sedangkan pada tampilan desktop tampilan keduanya sama.

Secara default model tampilan yang digunakan pada VioMagz adalah full width. Untuk merubahnya menjadi tampilan normal (thumbnail kecil) silakan cari kode ini di dalam template:

<b:include name='thumbnailfullwidth'/>

Hapus dan ganti dengan kode ini :

<b:include name='thumbnailnormal'/>

Cara Menghilangkan Thumbnail Postingan

Hapus kode ini di dalam template:

<b:include data='post' name='postthumbnail'/>

Hapus juga kode ini di dalam template:

<b:include name='thumbnailstyle'/>

Cara Menghilangkan Label di Atas Postingan

Hapus kode ini di dalam template:

<b:include data='post' name='labelsinfo'/>

Cara Menghilangkan Widget ‘Baca Juga’

Cari kode ini di dalam template:

var widgetBacaJuga = true;

Ganti true menjadi false

Cara Menghilangkan Widget Related Posts

Cari kode ini di dalam template:

var relatedPosts = true;

Ganti true menjadi false

Cara Menghilangkan Navigasi Halaman Bernomor

Cari kode ini di dalam template:

var numberedPagination = true;

Ganti true menjadi false

Cara Agar Header Tidak Sticky

Hapus kode ini di dalam template:

<b:include name='stickyheaderstyle'/>

Share this post

• Facebook
• Twitter