How to Edit Navigation Menu

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