Lompat ke konten Lompat ke sidebar Lompat ke footer

Panduan Lengkap Cara Setting Template VioMagz

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

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

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

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

4 komentar untuk "Panduan Lengkap Cara Setting Template VioMagz"

  1. Selamat malam mas, mohon bantuannya untuk setting label dan penyesuaian artikel ke menu seperti apa kira kira..

    Contoh Pada menu mas hanapi :
    Menu NGEBLOG Sub Menu Blogger

    Tapi di setting Beranda ---- Template ---- Tutorial

    Sekali lagi terimakasih atas bantuannya mas

    BalasHapus
    Balasan
    1. silakan setting di template lalu klik Edit HTML lalu cari kode menu 1, lalu gantikan dengan link mas wira, terima kasih

      Hapus
  2. Mau nanya mas, untuk viomagz versi 3.2 . Bagaimana cara mengganti tulisan viomagz 3.2 pada bagian header itu menjadi nama blog kita?
    Mohoh jawabnya mas

    BalasHapus
    Balasan
    1. Ada di tata letak, lalu jika masih ada tulisan VioMagz 3.2 silakan dihapus

      Hapus

Berlangganan via Email