Panduan Setting Template VioMagz versi Terbaru - Cara Konfigurasi VioMagz

Di bawah ini adalah panduan cara pemasangan serta pengaturan template premium VioMagz. Silakan dibaca secara pelan-pelan dan teliti supaya templatenya terpasang dengan baik dan benar.

 dengan baik dan benar.
panduan setting template viomagz versi terbaru

Memasang Template

Hal pertama yang perlu dilakukan tentu saja memasang template yang sudah dibeli ke blog milik sobat.
Berikut langkah-langkahnya:
#1. Pertama pastikan sobat sudah meng-unzip file template yang didownload. Di dalam file .zip terdapat file berekstensi .xml, nah file tersebut yang akan diupload atau pasang ke blog.
#2. Kedua saya merekomendasikan untuk melakukan backup template yang akan diganti.
Caranya:
  • Login ke “Blogger” > Masuk ke menu “Tema”
  • Klik “Backup / Pulihkan”
  • Klik “Download tema”
#3. Selanjutnya sobat tinggal mengupload file template ke blog.
Caranya:
  • Login ke “Blogger” > Masuk ke menu “Tema”
  • Klik “Backup / Pulihkan”
  • Klik “Choose File”
  • Pilih file template di Komputer > Klik “Upload”
#4. Template sudah berhasil terpasang.

Mengedit Menu Navigasi

Pada template VioMagz terdapat dua menu navigasi. Menu Navigasi pertama terletak di sebelah kanan Header, dan yang kedua terletak di atas Footer.
Untuk mengedit kedua menu navigasi sobat harus mengeditnya melalui menu Edit HTML.
Login ke “Blogger” > Masuk ke menu “Tema” > Klik “Edit HTML”.
Menu Navigasi Pertama (Sebelah Kanan Header)
Cari kode ini di dalam kode template:
<!-- menu navigasi header start -->
<ul>
  <li><a href='#'>Menu</a></li>
  <li><a href='#'>Menu</a></li>
  <li><a href='#'>Menu</a></li>
  <li><a href='#'>Menu</a>
  <ul>
	<li><a href='#'>SubMenu1</a></li>
	<li><a href='#'>SubMenu2</a></li>
	<li><a href='#'>SubMenu3</a></li>
  </ul>
  </li>
  <li><a href='#'>Menu</a>
  <ul>
	<li><a href='#'>SubMenu1</a></li>
	<li><a href='#'>SubMenu2</a></li>
	<li><a href='#'>SubMenu3</a></li>
	<li><a href='#'>SubMenu4</a></li>
  </ul>
  </li>
</ul>
<!-- menu navigasi header end -->
Edit text dengan background berwarna merah dengan URL tujuan dan warna hijau dengan nama menu yang diinginkan.
  • Menghapus Menu
    Untuk menghapus salah satu menu cukup hapus dari kode <li> sampai </li>. Misalnya ingin menghapus menu “SubMenu4” maka hapus kode :
    <li><a href='#'>SubMenu4</a></li>
  • 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 -->
  • 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 -->
  • Jangan lupa sesuaikan URL tujuan menu dan Nama menunya.
Menu Navigasi Kedua (Di Atas Footer)
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 -->
Edit text dengan background berwarna merah dengan URL tujuan dan yang berwarna hijau dengan nama menu yang diinginkan.
Jika sudah diedit semua, jangan lupa klik “Simpan tema”
Untuk menghapus dan menambah menu caranya sama seperti menu pertama, hanya bedanya untuk menu di atas footer tidak support submenu.

Menambahkan Tombol Media Sosial

Secara default tombol social media tidak terpasang ketika template baru pertama kali diupload.
Untuk memasangnya silakan ikuti langkah di bawah:
  • Login ke “Blogger” > Masuk ke menu “Tata Letak”
  • Klik “Tambahkan Gadget” di atas Footer
  • Pilih Gadget “HTML/JavaScript”
  • Selanjutnya tambahkan kode di bawah ini pada bagian Konten:
    <!-- social media button start -->
<ul class='nav-social'>
  <li><a class='fcb' href='https://www.facebook.com/' rel='nofollow'><i class='fa fa-facebook-square fa-2x'/></a>
  </li>  
  <li><a class='igicon' href='https://www.instagram.com/' rel='nofollow'><i class='fa fa-instagram fa-2x'/></a>
  </li>
  <li><a class='twt' href='https://twitter.com/' rel='nofollow'><i class='fa fa-twitter-square fa-2x'/></a> 
  </li>
  <li><a class='ytb' href='https://www.youtube.com' rel='nofollow'><i class='fa fa-youtube fa-2x'/></a> 
  </li>
</ul>
<!-- social media button end -->
  • Jangan lupa klik “Simpan”
Jangan lupa rubah URL yang bertanda hijau di atas dengan URL profil social media 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

Sobat 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 “Tingkat Lanjut”
  • 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 “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
  • Cari lagi kode ini :
    <input name='uri' type='hidden' value='BlogMasSugeng'/>
    Ganti yang saya tandai merah dengan ID FeedBurner milik sobat
  • Terakhir klik “Simpan tema“

Panduan Lainnya…

Panduan-panduan lain untuk template VioMagz bisa dilihat di sini…
Tags:

Posting Komentar

0 Komentar

Komentarlah sesuka hatimu!