Panduan Lengkap Cara Setting Template VioMagz

MyThingsTips - Berjumpa lagi dengan saya disini, hari ini saya akan membahas cara setting Template VioMagz buatan mas sugeng yang sangat menarik banyak blogger yang membeli, dan kali ini saya akan membahas cara setting template viomagz.
VioMagz buatan mas sugeng ini adalah template terbaik dan selain terbaik, template ini mempunyai speed yang wuzz, dan gak kalah dengan template orang luar.
Baiklah langsung saja kita menuju pada artikel Panduan Lengkap Cara Setting Template VioMagz

Memasang Template

hal yang pertama dilakukan adalah memasang template, baiklah kita bahas ini dulu

yang pertama silakan buka dasboard blogger lalu pilih tema, yang file dari mas sugeng tadi yang diberikan silakan di unzip, lalu ambil file berekstensi .xml , upload dan pasang pada blog
yang kedua saya rekomendasikan backup tema sebelumnya dulu sebelum mengganti.

Caranya:

buka blogger, pilih tema.
lalu klik Backup/Upload.
selanjutnya silakan backup tema sebelumnya, lalu silakan upload tema VioMagz yang telah diunzip tadi.

Mengedit Menu Navigasi

yang kedua adalah, mengedit menu navigasi template viomagz, pada template viomagz ini terdapat 2 menu navigasi disebelah header dan yang satunya lagi terletak diatas footer.

Untuk mengedit menu tersebut siklakan ikuti tata caranya tersebut.

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

Silakan 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

Jika Ingin 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 Sosial Media

Secara default tombol social media tidak terpasang ketika template baru pertama kali diupload.

Untuk memasangnya silakan ikuti langkah di bawah:

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

Selanjutnya silakan kelik "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.

Yang Terakhir adalah

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=blogmythingstips

Ganti yang saya tandai merah dengan ID FeedBurner milik sobat

Cari lagi kode ini :

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

Ganti yang saya tandai merah dengan ID FeedBurner milik sobat
Yang Terakhir silakan klik Simpan

Bagaima mudah bukan cara setting template VioMagz cara setting diatas sama seperti panduan yang diberikan mas sugeng, jadi teman - teman tidak perlu khawatir dengan panduan ini karena sudah sama persis dengan panduan mas sugeng, baiklah sepertinya sampai disini perjumpaan kita jika saya ada waktu saya akan membuat artikel lainnya lagi yang menarik, sampai jumpa.

Rumah otodidak