-->
Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Mengedit Menu Navigasi Template VioMagz

Cara Mengedit Menu Navigasi Template VioMagz

Template VioMagz terbilang sangat menarik, kenapa? Banyak hal yang membuat VioMagz ini menarik seperti tampilannya yang responsive, sederhana, dan mudah di edit bagi blogger pemula atau orang awam coding serta HTML.

Para blogger sudah banyak yang menggunakan template Viomagz dan tampilan dari template VioMagz bisa dilihat langsung pada blog mas malven. Selain itu, desain yang sederhana dan sangat mendukung SEO blog yang menjadikannya template ini populer.

Selama menjadi blogger, sudah banyak sekali model template blog yang saya gunakan. Mulai dari yang gratis hingga berbayar. Pada artikel ini, saya akan membuat tutorial blog tentang cara membuat, dan mengedit menu navigasi template viomagz.

Sebelum masuk ke pembahasan alangkah baiknya jika Anda mengetahui pengertian dari menu navigasi itu sendiri.

Apa itu Menu Navigasi?

Menu Navigasi adalah daftar menu yang dibuat berdasarkan label atau halaman statis pada postingan blog.

Pada template VioMagz terdapat dua menu navigasi yaitu:

  1. Menu navigasi pertama terletak di sebelah kanan Header
  2. Menu navigasi kedua terletak di atas Footer.

Jika Anda ingin mengedit kedua menu navigasi, Anda bisa mengeditnya melalui menu Edit HTML.

Login ke Blogger > Masuk ke menu Tema > Lalu klik Edit HTML.

Untuk Menu Navigasi Pertama (Sebelah Kanan Header)

Anda bisa cari kode di bawah 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 --> 

Anda bisa mengedit bagian "#" berwarna hijau dengan URL Tujuan dan warna biru dengan Nama Menu yang diinginkan.

  • Menghapus Menu
    Bagi Anda yang ingin menghapus salah satu menu, cukup hapus kode <li> sampai </li>. Contohnya, Anda ingin menghapus SubMenu4 maka hapus kode:
    <li><a href='#'>SubMenu4</a></li> 

  • Menambah Menu
    Bagi Anda yang ingin menambah menu, copy kode ini:
    <li><a href='#'>NamaMenu</a></li> 
    Paste kode tersebut di atas kode ini:
    </ul>
    <!-- menu navigasi header end --> 

  • Menambah Menu dengan SubMenu
    Bagi Anda yang ingin 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 ini:
    </ul>
    <!-- menu navigasi header end --> 

  • Jangan lupa untuk sesuaikan URL Tujuan menu dan Nama Menu.

Untuk Menu Navigasi Kedua (Diatas Footer)

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

Anda juga bisa edit bagian "#" berwarna hijau dengan URL Tujuan dan warna biru dengan Nama Menu yang diinginkan.

Nah, jika Anda sudah di edit semua, maka jangan lupa untuk klik Simpan Tema.

Menghapus dan menambah menu caranya seperti menu pertama, yang membedakan hanya menu di atas footer tidak support SubMenu.

Jika ada hal yang ingin ditanyakan silahkan berikan komentar yang sudah disediakan di bawah ini. Semoga bermanfaat dan terima kasih atas kunjungan Anda.
... ...