Menu navigasi tersedia dalam dua versi ...

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.
   

Menu standar

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

<!--[ Standar menu ]-->
<li class='leftC'>
  <b:comment>Change attribute href= to add url</b:comment>
  <a aria-label='About' class='a flex op i20' href='#' itemprop='url'>
    <!--[ icon ]-->
    <b:include name='profile-2user-icon'/>
    
    <!--[ name ]-->
    <div class='n'>
      <span itemprop='name'>About</span>
    </div>
  </a>
</li>

• Ubah atribut href='#' dengan tautan tujuan Anda.
• Ganti kata/kalimat yang ditandai dengan judul baru Anda.
• Tambahkan ikon baru dengan mengganti kode bertanda <b:include name='profile-2user-icon'/> dengan ikon SVG, Lihat semua koleksi

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:

<!--[ Dropdown ]-->
<li class='leftC dr'>
  <b:comment><!--[ Add open='' attribute to keep the menu open ]--></b:comment>
  <b:tag name='details'>
    <b:tag class='a flex noWrap op i20' name='summary'>
      <!--[ icon ]-->
      <b:include name='folder-2-icon'/>
  
      <!--[ name ]-->
      <b:tag class='flexIn center grow' name='span'>
        <span>Sub menu</span>
        <b:include name='arrow-down-1-icon'/>
      </b:tag>
    </b:tag>
    
    <ul class='n'>
      <b:comment><!--[ Change attribute href='#' to add url ]--></b:comment>
      <li itemprop='name'>
        <a href='#' itemprop='url'>
          <span>Sub-menu 01</span>
        </a>
      </li>
      <li itemprop='name'>
        <a href='#' itemprop='url'>
          <span>Sub-menu 02</span>
        </a>
      </li>
    
      <li class='m' data-text='Mini heading' itemprop='name'>
        <a href='#' itemprop='url'>
          <span>Sub-menu 03</span>
        </a>
      </li>
      <li itemprop='name'>
        <a href='#' itemprop='url'>
          <span>Sub-menu 04</span>
        </a>
      </li>
    </ul>
    
  </b:tag>
</li>

• Tambahkan atribut open='' pada tag <b:tag name='details'> agar dropdown tetap terbuka.
• Hapus/ganti satu baris kode <b:include name='folder-2-icon'/> untuk menambahkan ikon baru.
• Ubah kata/kalimat pada tag <span>Sub menu</span> untuk mengubah judul dropdown.
• Atribut href='#' untuk tautan tujuan.
• Tag <span>Sub-menu 01</span> untuk judul sub-menu.
• class='m' data-text='Mini heading' untuk menambahkan judul kecil di sub-menu, ganti tulisan 'Mini heading' dengan judul Anda

Alternatif menu (Edit melalui Tata Letak Blogger)

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 Main 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 Main Menu (alternative) 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:

<!--[ Standar menu ]-->
<li class='leftC'>...</li>

<!--[ Dropdown ]-->
<li class='leftC dr'>...</li>

// your_new_menu

<!--[ icon ]-->
<b:include name='folder-2-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>

<!--[ Standar menu ]-->
<li class='leftC'>...</li>

<!--[ Dropdown ]-->
<li class='leftC dr'>...</li>

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

<!--[ Dropdown ]-->
<li class='leftC dr br'>...</li>