How to Edit Navigation Menu

Customize the navigation menu after installing the theme to create a more professional site.

The navigation menu is available in two versions, namely the default menu with additional dropdowns and an alternative menu without dropdowns, the default menu can only be edited via Edit HTML.

1. Go to Blogger HTML Editor.
2. Find the HTML000 widget, click icon for quick search.

Table of Contents

Standard menu

In the navigation widget you will find code similar to below:

<li>
  <a class="a" href="#!" itemprop="url">
    <!--[ Icon ]-->
    <b:include name="profiles-icon" />
    <!--[ Title navigation ]-->
    <span class="n" itemprop="name">About</span>
  </a>
</li>

Information:

1. Change the attribute value with your destination link.
2. Add SVG icon, See all collections
3. Replace the word/sentence for the link title.

Dropdown menu

If necessary, such as for writing one or more categories, you can add one or more dropdown menus in the navigation, the code for dropdown is similar to the code below:

<li class="drp">
  <input checked="" class="drpI hidden" id="drpDwn-1" name="drpDwn" type="checkbox" />
  <label class="a" for="drpDwn-1">
    <!--[ Icon ]-->
    <b:include name="folder-icon" />
    <!--[ Title navigation ]-->
    <span class="n new">Menu</span>
    <b:include name="arow-down-icon" />
  </label>
  <ul>
    <!-- [ without icon ] -->
    <li class="m" data-text="Without Icon" itemprop="name">
      <a href="#!" itemprop="url">Sub menu #01</a>
    </li>
    <li itemprop="name"><a href="#!" itemprop="url">Sub menu #02</a></li>
    <li itemprop="name"><a href="#!" itemprop="url">Sub menu #03</a></li>
    <!-- [ with icon ] -->
    <li class="i m" data-text="With Icon" itemprop="name">
      <a href="#!" itemprop="url">
        <b:include name="folder-icon" /> <span>Sub menu #04</span>
      </a>
    </li>
    <li class="i" itemprop="name">
      <a href="#!" itemprop="url">
        <b:include name="folder-icon" /> <span>Sub menu #05</span>
      </a>
    </li>
  </ul>
</li>

Information:

1. Add the checked='' attribute to open the default dropdown.
2. Add a unique dropdown ID (you can use the number at the end), and make sure the ID in the input tag and the for attribute in the label tag are the same.
3. Remove/replace code to add icon.
4. Change the words/sentences to change the dropdown title.
5. Change the attribute value as a caption/sub-menu title
6. destination link from sub-menu.
7. Customize the title for the sub-menu link.

<li class="drp mr br">
  <input checked="" class="drpI hidden" id="drpMr-2" name="drpDwn" type="checkbox" />
  <label class="a" for="drpMr-2">
    <!--[ Title navigation ]-->
    <span class="n">More..</span>
    <b:include name="arow-down-icon" />
  </label>
  <ul>
    <li itemprop="name"><a href="#!" itemprop="url">ShortLink</a></li>
    <li itemprop="name"><a href="#!" itemprop="url">SafeLink</a></li>
    <li itemprop="name"><a href="#!" itemprop="url">Try RTL Mode</a></li>
  </ul>
</li>

Information:

1. className for dropdown style 2.
2. className to add a bottom border (as a menu divider).
3. Add the checked='' attribute to open the default dropdown.
4. Add a unique dropdown ID (you can use the number at the end), and make sure the ID in the input tag and the for attribute in the label tag are the same.
5. Change the words/sentences to change the dropdown title.
6. destination link from sub-menu.
7. Customize the title for the sub-menu link.

Alternative menu (Edit Through the Blogger Layout)

Pros:

1. Can be edited from the Blogger Layout.
2. Easily change page title and url.

Cons:

1. No dropdown.
2. No divider line.
3. Can't change the icon.

This menu is more suitable for users who cannot edit HTML, users don't need to bother to open the Blogger HTML Editor to edit the navigation menu.

1. On the Blogger dashboard, click Layout.
2. Find a widget named Main Menu, click icon on the widget.
3. Press the switch button on Show this widget.
4. Click Save and the default navigation widget will be hidden.
5. Next, edit the Main Menu (alternative) widget and activate it by pressing the Show this widget switch button.
6. Edit the list of links in the widget, you can delete, add or change the menu order.

Faq:

How to add a new dropdown menu?

You can directly copy the Dropdown navigation code above and paste it on a new line, the correct placement is like the following example:

<!--[ Standard menu ]-->
<li>...</li>

<!--[ Dropdown ]-->
<li class="drp">...</li>

<!-- new menu here -->

How to change icons?

Icons can be changed by replacing the line of code marked with <!--[ icon ]--> or in the example above is the <b:include name='folder-icon'/> tag, all SVG icons will be automatically converted to dimensions of 20px/20px.

Example of correct application:

<!--[ icon ]-->
<b:include name='folder-icon'/>

<!--[ icon ]-->
<svg class='line' viewBox='0 0 24 24'><path d='M14.4301 5.92993L20.5001 11.9999L14.4301 18.0699'></path><path d='M3.5 12H20.33'></path></svg>

How do I change the destination link?

The new destination link must be written in the href attribute, in the example above we used href='#!', replace the #! symbol with your new url.

How to add line break to menu?

The separator line is used to categorize the menu from one another. To use it, add a new className br in the <li tag, for more details see the example below:

<!--[ Standard menu ]-->
<li>...</li>

<!--[ Dropdown ]-->
<li class="drp">...</li>

<!--[ Standard menu ]-->
<li class="br">...</li>

<!--[ Dropdown ]-->
<li class="drp br">...</li>

Menu navigasi tersedia dalam dua versi, yaitu menu default dengan tambahan dropdown dan menu alternatif tanpa dropdown, menu default hanya dapat diedit melalui Edit HTML.

1. Buka Blogger HTML Editor.
2. Cari widget HTML000, klik ikon untuk pencarian cepat.

Daftar isi

Menu standar

Di widget navigasi, Anda akan menemukan kode seperti di bawah ini:

<li>
  <a class="a" href="#!" itemprop="url">
    <!--[ Icon ]-->
    <b:include name="profiles-icon" />
    <!--[ Title navigation ]-->
    <span class="n" itemprop="name">About</span>
  </a>
</li>

Keterangan:

1. Ubah nilai atribut dengan tautan tujuan Anda.
2. Tambahkan ikon SVG, Lihat semua koleksi
3. Ganti kata/kalimat untuk judul tautan.

Menu dropdown

Jika perlu, seperti untuk menulis satu atau beberapa kategori, Anda dapat menambahkan satu atau beberapa menu dropdown pada navigasi, kode untuk dropdown mirip dengan kode di bawah ini:

<li class="drp">
  <input checked="" class="drpI hidden" id="drpDwn-1" name="drpDwn" type="checkbox" />
  <label class="a" for="drpDwn-1">
    <!--[ Icon ]-->
    <b:include name="folder-icon" />
    <!--[ Title navigation ]-->
    <span class="n new">Menu</span>
    <b:include name="arow-down-icon" />
  </label>
  <ul>
    <!-- [ without icon ] -->
    <li class="m" data-text="Without Icon" itemprop="name">
      <a href="#!" itemprop="url">Sub menu #01</a>
    </li>
    <li itemprop="name"><a href="#!" itemprop="url">Sub menu #02</a></li>
    <li itemprop="name"><a href="#!" itemprop="url">Sub menu #03</a></li>
    <!-- [ with icon ] -->
    <li class="i m" data-text="With Icon" itemprop="name">
      <a href="#!" itemprop="url">
        <b:include name="folder-icon" /> <span>Sub menu #04</span>
      </a>
    </li>
    <li class="i" itemprop="name">
      <a href="#!" itemprop="url">
        <b:include name="folder-icon" /> <span>Sub menu #05</span>
      </a>
    </li>
  </ul>
</li>

Keterangan:

1. Tambahkan atribut checked='' agar dropdown default terbuka.
2. Tambahkan id dropdown yg unik (bisa menggunakan nomor dibelakang), dan pastikan id pada tag input dan atribut for pada tag label sama.
3. Hapus/ganti kode untuk menambahkan ikon.
4. Ubah kata/kalimat untuk mengubah judul dropdown.
5. Ubah nilai atribut sebagai keterangan/judul kecil sub-menu
6. tautan tujuan dari sub-menu.
7. Sesuaikan judul untuk tautan sub-menu.

<li class="drp mr br">
  <input checked="" class="drpI hidden" id="drpMr-2" name="drpDwn" type="checkbox" />
  <label class="a" for="drpMr-2">
    <!--[ Title navigation ]-->
    <span class="n">More..</span>
    <b:include name="arow-down-icon" />
  </label>
  <ul>
    <li itemprop="name"><a href="#!" itemprop="url">ShortLink</a></li>
    <li itemprop="name"><a href="#!" itemprop="url">SafeLink</a></li>
    <li itemprop="name"><a href="#!" itemprop="url">Try RTL Mode</a></li>
  </ul>
</li>

Keterangan:

1. className untuk dropdown style 2.
2. className untuk menambahkan border bawah (sebagai pembatas menu).
3. Tambahkan atribut checked='' agar dropdown default terbuka.
4. Tambahkan id dropdown yg unik (bisa menggunakan nomor dibelakang), dan pastikan id pada tag input dan atribut for pada tag label sama.
5. Ubah kata/kalimat untuk mengubah judul dropdown.
6. tautan tujuan dari sub-menu.
7. Sesuaikan judul untuk tautan sub-menu.

Alternatif menu (Edit melalui Tata Letak Blogger)

Kelebihan:

1. Dapat diedit dari Tata Letak Blogger.
2. Mudah mengubah judul halaman dan url.

kekurangan:

1. Tanpa dropdown.
2. Tidak ada garis pembatas.
3. Tidak bisa mengganti ikon.

Menu ini lebih cocok untuk pengguna yang tidak bisa mengedit HTML, pengguna tidak perlu repot-repot membuka Blogger HTML Editor untuk mengedit menu navigasi.

1. Pada dashboard Blogger, klik Tata Letak.
2. Cari widget dengan judul Navigasi Menu, klik ikon pada widget tersebut.
3. Tekan tombol switch pada Tampilkan widget ini.
4. Klik Simpan dan widget navigasi default akan disembunyikan.
5. Selanjutnya, edit widget Navigasi Menu (Simple) dan aktifkan dengan menekan tombol switch Tampilkan widget ini.
6. Edit daftar link dalam widget, Anda dapat menghapus, menambah, atau mengubah urutan menu.

Pertanyaan umum:

Bagaimana cara menambahkan menu dropdown baru?

Anda bisa langsung menyalin kode navigasi Dropdown di atas lalu menempelnya pada baris baru, penempatan yang benar adalah seperti contoh berikut:

<!--[ Standar menu ]-->
<li>...</li>

<!--[ Dropdown ]-->
<li class="drp">...</li>

<!-- new menu here -->

Bagaimana cara mengganti ikon pada menu

Ikon dapat diubah dengan cara mengganti baris kode yang ditandai dengan <!--[ icon ]--> atau pada contoh di atas adalah tag <b:include name='folder-icon'/>, semua ikon SVG akan otomatis dikonversi ke ukuran 20px/20px.

Contoh penerapan yang benar:

<!--[ icon ]-->
<b:include name='folder-icon'/>

<!--[ icon ]-->
<svg class='line' viewBox='0 0 24 24'><path d='M14.4301 5.92993L20.5001 11.9999L14.4301 18.0699'></path><path d='M3.5 12H20.33'></path></svg>

Bagaimana cara mengubah link tujuan?

Link tujuan baru harus dituliskan dalam atribut href, pada contoh di atas kami menggunakan href='#!', gantilah simbol #! dengan url baru Anda.

Bagaimana cara menambahkan baris pembatas pada menu?

Garis pemisah digunakan untuk mengkategorikan menu satu dengan lainnya. Untuk menggunakannya, tambahkan className baru br dalam tag <li, untuk lebih detailnya perhatikan contoh di bawah ini:

<!--[ Standar menu ]-->
<li>...</li>

<!--[ Dropdown ]-->
<li class="drp">...</li>

<!--[ Standar menu ]-->
<li class="br">...</li>

<!--[ Dropdown ]-->
<li class="drp br">...</li>

Related Post