Menu Navigasi Theme62

Petunjuk menu navigasi untuk Theme62

Menu Navigasi

Menu navigasi pada blog adalah kumpulan tautan atau tombol penghubung yang berfungsi sebagai peta agar pengunjung dapat berpindah antarhalaman, seperti halaman Beranda, Tentang Kami, dan Kategori. Elemen ini biasanya terletak di bagian atas halaman agar mudah dilihat dan diakses.

1. Menu navigasi dapat diedit melalui menu Tata Letak.
2. Pada Navigation, klik icon pensil pada Nav Menu.
3. Copy paste kode pada kolom konten.

Menu Navigasi Theme62

<ul class="nav-menu"> 
  <li> <input id="_menu_Blog" type="checkbox"/> <label for="_menu_Blog"> 
    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Z"></path></svg> 
     <span>Blog</span> </label> 
       <div> <ul> <li> <a href="#" itemprop="url"> <span itemprop="name">About Us</span> </a> </li>
                  <li> <a href="#" itemprop="url"> <span itemprop="name">Contact Form</span> </a> </li> 
                  <li> <a href="#" itemprop="url"> <span itemprop="name">Terms and Conditions</span> </a> </li> 
                  <li> <a href="#" itemprop="url"> <span itemprop="name">Privacy Policies</span> </a> </li> 
                  <li> <a href="#" itemprop="url"> <span itemprop="name">Disclaimer</span> </a> </li> 
                  <li> <a href="#" itemprop="url"> <span itemprop="name">Sitemap</span> </a> </li> </ul> </div> </li>
  <li> <a href="#" itemprop="url"> 
    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M480-120 200-272v-240L40-600l440-240 440 240v320h-80v-276l-80 44v240L480-120Zm0-332 274-148-274-148-274 148 274 148Zm0 241 200-108v-151L480-360 280-470v151l200 108Zm0-241Zm0 90Zm0 0Z"></path></svg> 
      <span itemprop="name">Education</span> </a> </li> 
  <li> <a href="#" itemprop="url"> <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M400-160h160v-44l50-20q65-26 110.5-72.5T786-400H174q20 57 65 103.5T350-224l50 20v44Zm-80 80v-70q-107-42-173.5-130T80-480h80v-320l720-80v60l-460 52v68h460v60H420v160h460q0 112-66.5 200T640-150v70H320Zm0-620h40v-62l-40 5v57Zm-100 0h40v-50l-40 4v46Zm100 220h40v-160h-40v160Zm-100 0h40v-160h-40v160Zm260 80Z"></path></svg> 
    <span itemprop="name">Recipe</span> </a> </li> 
  <li> <input id="_menu_Technology" type="checkbox"/> <label for="_menu_Technology"> 
    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M80-160v-120h80v-440q0-33 23.5-56.5T240-800h600v80H240v440h240v120H80Zm520 0q-17 0-28.5-11.5T560-200v-400q0-17 11.5-28.5T600-640h240q17 0 28.5 11.5T880-600v400q0 17-11.5 28.5T840-160H600Zm40-120h160v-280H640v280Zm0 0h160-160Z"></path></svg> 
    <span>Technology</span> </label> 
   <div> <ul> <li> <a href="#" itemprop="url"> <span itemprop="name">Laptop</span> </a> </li> 
     <li> <input id="_menu_Gadget" type="checkbox"/> <label for="_menu_Gadget"> <span>Gadget</span> </label> 
      <div> <ul> <li> <a href="#" itemprop="url"> <span itemprop="name">Samsung</span> </a> </li> 
                  <li> <a href="#" itemprop="url"> <span itemprop="name">Xiaomi</span> </a> </li> 
                  <li> <a href="#" itemprop="url"> <span itemprop="name">Asus</span> </a> </li> 
                  <li> <a href="#" itemprop="url"> <span itemprop="name">Vivo</span> </a> </li> 
                  <li> <a href="#" itemprop="url"> <span itemprop="name">Oppo</span> </a> </li> </ul> </div> </li> </ul> </div> </li> 
  <li> <a href="#" itemprop="url"> <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M182-200q-51 0-79-35.5T82-322l42-300q9-60 53.5-99T282-760h396q60 0 104.5 39t53.5 99l42 300q7 51-21 86.5T778-200q-21 0-39-7.5T706-230l-90-90H344l-90 90q-15 15-33 22.5t-39 7.5Zm16-86 114-114h336l114 114q2 2 16 6 11 0 17.5-6.5T800-304l-44-308q-4-29-26-48.5T678-680H282q-30 0-52 19.5T204-612l-44 308q-2 11 4.5 17.5T182-280q2 0 16-6Zm482-154q17 0 28.5-11.5T720-480q0-17-11.5-28.5T680-520q-17 0-28.5 11.5T640-480q0 17 11.5 28.5T680-440Zm-80-120q17 0 28.5-11.5T640-600q0-17-11.5-28.5T600-640q-17 0-28.5 11.5T560-600q0 17 11.5 28.5T600-560ZM310-440h60v-70h70v-60h-70v-70h-60v70h-70v60h70v70Zm170-40Z"></path></svg> <span itemprop="name">Game</span> </a> </li> 
  <li> <a href="/safelink" itemprop="url"> <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z"></path></svg> <span itemprop="name">Safelink</span> </a> </li> </ul>

Hasil kode akan seperti ini;

Blog

• About
• Contact
• Disclaimer
• Terms of service
• Privacy policy
• Sitemap

Education

Recipe

Technogogy

• Laptop
• Gadget
  • Samsung
  • Xiaomi
  • Asus
  • Vivo
  • Oppo

Game

Safelink

Untuk lebih jelas, silahkan copy paste kode di atas pada Tata letak Blogger di Menu Nav, Klik icon pensil, di kolom konten

Penjelasan Menu Navigasi

Untuk memudahkan dalam memahami menu navigasi pada Theme62, maka akan disahkan per menu

Label Blog

Kode label Blog adalah

<ul class="nav-menu">
  <li> <input id="_menu_Blog" type="checkbox"/> <label for="_menu_Blog"> 
    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Z"></path></svg> 
     <span>Blog</span> </label> 
       <div> <ul> <li> <a href="#" itemprop="url"> <span itemprop="name">About Us</span> </a> </li>
                  <li> <a href="#" itemprop="url"> <span itemprop="name">Contact Form</span> </a> </li> 
                  <li> <a href="#" itemprop="url"> <span itemprop="name">Terms and Conditions</span> </a> </li> 
                  <li> <a href="#" itemprop="url"> <span itemprop="name">Privacy Policies</span> </a> </li> 
                  <li> <a href="#" itemprop="url"> <span itemprop="name">Disclaimer</span> </a> </li> 
                  <li> <a href="#" itemprop="url"> <span itemprop="name">Sitemap</span> </a> </li> </ul> </div> </li>

Keterangan

Kode _menu_Blog ada dua, jika ingin diganti, diganti semua. Contoh _menu_Label yang diinginkan.

Pada kode <span>Blog</span> diganti seseuai dengan _menu_Blog

Pada kode svg;

 <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Z"></path></svg>

Bisa diganti kode svg yang diinginkan

 <svg xmlns="kode svg Anda"></path></svg>

Pada kode

<div> <ul> <li> <a href="#" itemprop="url"> <span itemprop="name">About Us</span> </a> </li>
            <li> <a href="#" itemprop="url"> <span itemprop="name">Contact Form</span> </a> </li> 
            <li> <a href="#" itemprop="url"> <span itemprop="name">Terms and Conditions</span> </a> </li> 
            <li> <a href="#" itemprop="url"> <span itemprop="name">Privacy Policies</span> </a> </li> 
            <li> <a href="#" itemprop="url"> <span itemprop="name">Disclaimer</span> </a> </li> 
            <li> <a href="#" itemprop="url"> <span itemprop="name">Sitemap</span> </a> </li> </ul> </div> </li>

Isi tanda pagar # diisi dengan link tujuan

Pada kode About Us diisi dengan label yang diingikan. Begitu juga dengan Contact Form, Dilcliamer, dll.

Jika kurang paham lihat kode ini

<ul class="nav-menu"> 
  <li> <input id="_menu_Nama label" type="checkbox"/> <label for="_menu_Nama Label sesuai yang pertama"> 
    <svg xmlns="kode svg anda"></path></svg> 
     <span>Blog</span> </label> 
       <div> <ul> <li> <a href="link tujuan" itemprop="url"> <span itemprop="name">Nama label sesuai pada link tujuan</span> </a> </li>
                  <li> <a href="#" itemprop="url"> <span itemprop="name">Contact Form</span> </a> </li> 
                  <li> <a href="#" itemprop="url"> <span itemprop="name">Terms and Conditions</span> </a> </li> 
                  <li> <a href="#" itemprop="url"> <span itemprop="name">Privacy Policies</span> </a> </li> 
                  <li> <a href="#" itemprop="url"> <span itemprop="name">Disclaimer</span> </a> </li> 
                  <li> <a href="#" itemprop="url"> <span itemprop="name">Sitemap</span> </a> </li> </ul> </div> </li>

Untuk selanjutnya semua sama.