Cara Mengubah Header Menu (Expert)

Cara Mengubah Header Menu

Alasan utama menu ini tidak bisa di edit/ubah pada menu Layout atau Tata Letak adalah karena kodenya yang sedikit komplek serta penulisan kode ikon SVG yang lumayan panjang, untuk itu toturial ini ditulis untuk mempermudah Anda mengganti atau menambahkan link header menu.

Perubahan yang paling menonjol dari menu ini adalah tampilan mobile yang menambahkan ikon SVG serta link social media yang tidak ditampilkan pada dekstop. Ikuti langkah-langkah dibawah ini untuk mengubah header menu:

Mengubah Link

Secara default menu yang tersedia adalah beberapa dibawah ini :

  • About
  • Contact
  • Category
    • Sub Menu 1
    • Sub Menu 2
    • ...
  • More Menu
    • Sitemaps
    • Privacy
    • Disclamers

// Cari kode id='HTML1', Anda akan menemukan kumpulan kode seperti dibawah ini

 <ul class='header-menu widget-content' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
  <li>
    <a class='table' href='javascript:void(0)' itemprop='url'>
      <svg class='hidden' viewBox='0 0 32 32'><path d='M16,17a8,8,0,1,1,8-8A8,8,0,0,1,16,17ZM16,3a6,6,0,1,0,6,6A6,6,0,0,0,16,3Z'/><path d='M23,31H9a5,5,0,0,1-5-5V22a1,1,0,0,1,.49-.86l5-3a1,1,0,0,1,1,1.72L6,22.57V26a3,3,0,0,0,3,3H23a3,3,0,0,0,3-3V22.57l-4.51-2.71a1,1,0,1,1,1-1.72l5,3A1,1,0,0,1,28,22v4A5,5,0,0,1,23,31Z'/></svg>
      <span class='name' itemprop='name'>Profil</span>
    </a>
  </li>
  <li>
    <a class='table' expr:href='data:blog.homepageUrl + "p/contact.html"' itemprop='url'>
      <svg class='hidden' viewBox='0 0 32 32'><path d='M28,13a1,1,0,0,0-1,1v8a1,1,0,0,1-1,1H6a1,1,0,0,1-1-1V14a1,1,0,0,0-2,0v8a3,3,0,0,0,.88,2.12A3,3,0,0,0,6,25H26a3,3,0,0,0,2.12-.88A3,3,0,0,0,29,22V14A1,1,0,0,0,28,13Z'/><path d='M15.4,18.8a1,1,0,0,0,1.2,0L28.41,9.94a1,1,0,0,0,.3-1.23,3.06,3.06,0,0,0-.59-.83A3,3,0,0,0,26,7H6a3,3,0,0,0-2.12.88,3.06,3.06,0,0,0-.59.83,1,1,0,0,0,.3,1.23ZM6,9H26a.9.9,0,0,1,.28,0L16,16.75,5.72,9A.9.9,0,0,1,6,9Z'/></svg>
      <span class='name' itemprop='name'>Kontak</span>
    </a>
  </li>
  <li class='dropdown-menu drop'>
    <input class='drop-menu hidden' id='offdrop-menu1' name='dropdown-menu' type='checkbox'/>
    <label class='table' for='offdrop-menu1'>
      <svg class='hidden' viewBox='0 0 32 32'><path d='M4,28a3,3,0,0,1-3-3V7A3,3,0,0,1,4,4h7a1,1,0,0,1,.77.36L14.8,8H27a1,1,0,0,1,0,2H14.33a1,1,0,0,1-.76-.36L10.53,6H4A1,1,0,0,0,3,7V25a1,1,0,0,0,1,1,1,1,0,0,1,0,2Z'/><path d='M25.38,28H4a1,1,0,0,1-1-1.21l3-14A1,1,0,0,1,7,12H30a1,1,0,0,1,1,1.21L28.32,25.63A3,3,0,0,1,25.38,28ZM5.24,26H25.38a1,1,0,0,0,1-.79L28.76,14h-21Z'/></svg>
      <span class='name'>Dropmenu</span>
      <svg class='drop' viewBox='0 0 512 512'><path d='M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z'/></svg>
    </label>
    <ul>
      <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Blank Menu 1</a></li>
      <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Blank Menu 1</a></li>
      <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Blank Menu 1</a></li>
      <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Blank Menu 1</a></li>
    </ul>
  </li>
  <li class='dropdown-menu more'>
    <input class='drop-menu hidden' id='offdrop-menu5' name='dropdown-menu' type='checkbox'/>
    <label class='table' for='offdrop-menu5'>
      <span class='name'>Lainnya</span>
      <svg class='drop' viewBox='0 0 512 512'><path d='M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z'/></svg>
    </label>
    <ul>
      <li itemprop='name'><a href='https://fletro-3column.blogspot.com' itemprop='url'>Fletro 3 Column</a></li>
      <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Sitemaps</a></li>
      <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Disclamer</a></li>
      <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Privacy</a></li>
    </ul>
  </li>
 </ul>


Silahkan ubah bagian yang sudah ditandai pada kode diatas untuk mengganti link header menu besreta judulnya.

Menambahkan dropdown

Jika ingin menambahkan dropdown yang lain maka tinggal copy bagian kode dibawah ini lalu ubah bagian yang ditandai dengan nomor lain, misal offdrop-menu3



  <li class='dropdown-menu drop'>
    <input class='drop-menu hidden' id='offdrop-menu1' name='dropdown-menu' type='checkbox'/>
    <label class='table' for='offdrop-menu1'>
      <svg class='hidden' viewBox='0 0 32 32'><path d='M4,28a3,3,0,0,1-3-3V7A3,3,0,0,1,4,4h7a1,1,0,0,1,.77.36L14.8,8H27a1,1,0,0,1,0,2H14.33a1,1,0,0,1-.76-.36L10.53,6H4A1,1,0,0,0,3,7V25a1,1,0,0,0,1,1,1,1,0,0,1,0,2Z'/><path d='M25.38,28H4a1,1,0,0,1-1-1.21l3-14A1,1,0,0,1,7,12H30a1,1,0,0,1,1,1.21L28.32,25.63A3,3,0,0,1,25.38,28ZM5.24,26H25.38a1,1,0,0,0,1-.79L28.76,14h-21Z'/></svg>
      <span class='name'>Dropmenu</span>
      <svg class='drop' viewBox='0 0 512 512'><path d='M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z'/></svg>
    </label>
    <ul>
      <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Blank Menu 1</a></li>
      <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Blank Menu 1</a></li>
      <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Blank Menu 1</a></li>
      <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Blank Menu 1</a></li>
    </ul>
  </li>


Mengubah Icon

Icon dalam template ini ditandai dengan kode <svg>...</svg> seperti kode yang diblok dibawah ini:



 <ul class='header-menu widget-content' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
  <li>
    <a class='table' href='javascript:void(0)' itemprop='url'>
      <svg class='hidden' viewBox='0 0 32 32'><path d='M16,17a8,8,0,1,1,8-8A8,8,0,0,1,16,17ZM16,3a6,6,0,1,0,6,6A6,6,0,0,0,16,3Z'/><path d='M23,31H9a5,5,0,0,1-5-5V22a1,1,0,0,1,.49-.86l5-3a1,1,0,0,1,1,1.72L6,22.57V26a3,3,0,0,0,3,3H23a3,3,0,0,0,3-3V22.57l-4.51-2.71a1,1,0,1,1,1-1.72l5,3A1,1,0,0,1,28,22v4A5,5,0,0,1,23,31Z'/></svg>
      <span class='name' itemprop='name'>Profil</span>
    </a>
  </li>
  <li>
    <a class='table' expr:href='data:blog.homepageUrl + "p/contact.html"' itemprop='url'>
      <svg class='hidden' viewBox='0 0 32 32'><path d='M28,13a1,1,0,0,0-1,1v8a1,1,0,0,1-1,1H6a1,1,0,0,1-1-1V14a1,1,0,0,0-2,0v8a3,3,0,0,0,.88,2.12A3,3,0,0,0,6,25H26a3,3,0,0,0,2.12-.88A3,3,0,0,0,29,22V14A1,1,0,0,0,28,13Z'/><path d='M15.4,18.8a1,1,0,0,0,1.2,0L28.41,9.94a1,1,0,0,0,.3-1.23,3.06,3.06,0,0,0-.59-.83A3,3,0,0,0,26,7H6a3,3,0,0,0-2.12.88,3.06,3.06,0,0,0-.59.83,1,1,0,0,0,.3,1.23ZM6,9H26a.9.9,0,0,1,.28,0L16,16.75,5.72,9A.9.9,0,0,1,6,9Z'/></svg>
      <span class='name' itemprop='name'>Kontak</span>
    </a>
  </li>
  <li class='dropdown-menu drop'>
    <input class='drop-menu hidden' id='offdrop-menu1' name='dropdown-menu' type='checkbox'/>
    <label class='table' for='offdrop-menu1'>
      <svg class='hidden' viewBox='0 0 32 32'><path d='M4,28a3,3,0,0,1-3-3V7A3,3,0,0,1,4,4h7a1,1,0,0,1,.77.36L14.8,8H27a1,1,0,0,1,0,2H14.33a1,1,0,0,1-.76-.36L10.53,6H4A1,1,0,0,0,3,7V25a1,1,0,0,0,1,1,1,1,0,0,1,0,2Z'/><path d='M25.38,28H4a1,1,0,0,1-1-1.21l3-14A1,1,0,0,1,7,12H30a1,1,0,0,1,1,1.21L28.32,25.63A3,3,0,0,1,25.38,28ZM5.24,26H25.38a1,1,0,0,0,1-.79L28.76,14h-21Z'/></svg>
      <span class='name'>Dropmenu</span>
      <svg class='drop' viewBox='0 0 512 512'><path d='M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z'/></svg>
    </label>
    <ul>
      <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Blank Menu 1</a></li>
      <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Blank Menu 1</a></li>
      <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Blank Menu 1</a></li>
      <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Blank Menu 1</a></li>
    </ul>
  </li>
  <li class='dropdown-menu more'>
    <input class='drop-menu hidden' id='offdrop-menu5' name='dropdown-menu' type='checkbox'/>
    <label class='table' for='offdrop-menu5'>
      <span class='name'>Lainnya</span>
      <svg class='drop' viewBox='0 0 512 512'><path d='M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z'/></svg>
    </label>
    <ul>
      <li itemprop='name'><a href='https://fletro-3column.blogspot.com' itemprop='url'>Fletro 3 Column</a></li>
      <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Sitemaps</a></li>
      <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Disclamer</a></li>
      <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Privacy</a></li>
    </ul>
  </li>
 </ul>


Kami menyediakan beberapa pilihan icon yang bisa Anda gunakan sebagai ganti atau tambahan pada header menu beserta penulisannya, silahkan ganti kode-kode yang diblok diatas dengan kode dibawah ini

<svg viewBox='0 0 32 32'><path d='M13.43,15.63A5,5,0,0,0,10,7H4A1,1,0,0,0,3,8V24a1,1,0,0,0,1,1h7a5,5,0,0,0,2.43-9.37ZM11,23H5V9h5a3,3,0,0,1,0,6H8a1,1,0,0,0,0,2h3a3,3,0,0,1,0,6Z'/><path d='M23,12a6.27,6.27,0,0,0-6,6.5A6.27,6.27,0,0,0,23,25a5.9,5.9,0,0,0,4.83-2.64,1,1,0,0,0-1.66-1.12A3.83,3.83,0,0,1,23,23a4.27,4.27,0,0,1-4-4.5A4.27,4.27,0,0,1,23,14a4.14,4.14,0,0,1,3.9,3.5H21.49a1,1,0,1,0,0,2H28a1,1,0,0,0,1-1A6.27,6.27,0,0,0,23,12Z'/><path d='M19.5,10h7a1,1,0,0,0,0-2h-7a1,1,0,0,0,0,2Z'/></svg>
<svg viewBox='0 0 32 32'><path d='M6.5,3A3.5,3.5,0,1,0,10,6.5,3.5,3.5,0,0,0,6.5,3Zm0,5A1.5,1.5,0,1,1,8,6.5,1.5,1.5,0,0,1,6.5,8Z'/><path d='M9,11H4a1,1,0,0,0,0,2H8V27H5V16a1,1,0,0,0-2,0V28a1,1,0,0,0,1,1H9a1,1,0,0,0,1-1V12A1,1,0,0,0,9,11Z'/><path d='M27.34,12.68A5.94,5.94,0,0,0,23,11H22a7.84,7.84,0,0,0-4,.89A1,1,0,0,0,17,11H12a1,1,0,0,0-1,1V28a1,1,0,0,0,1,1h5a1,1,0,0,0,1-1V19a2,2,0,0,1,4,0v9a1,1,0,0,0,1,1h5a1,1,0,0,0,1-1V17A5.9,5.9,0,0,0,27.34,12.68ZM27,27H24V19a4,4,0,0,0-8,0v8H13V13h3v1a1,1,0,0,0,.62.92,1,1,0,0,0,1.09-.21c.95-1,1.7-1.71,4.29-1.71h1a4,4,0,0,1,2.92,1.09A4,4,0,0,1,27,17Z'/></svg>
<svg viewBox='0 0 32 32'><path d='M23,15a1,1,0,0,0,1-1V9a1,1,0,0,0-1-1H19V4a1,1,0,0,0-1-1H14a1,1,0,0,0-1,1A4,4,0,0,1,9,8,1,1,0,0,0,8,9v5a1,1,0,0,0,1,1h4a1,1,0,0,0,0-2H10V9.92A6,6,0,0,0,14.92,5H17V9a1,1,0,0,0,1,1h4v3H18a1,1,0,0,0-1,1v7a3,3,0,0,0,3,3h2v3H18a4,4,0,0,1-4-4V18a1,1,0,0,0-2,0v5a6,6,0,0,0,6,6h5a1,1,0,0,0,1-1V23a1,1,0,0,0-1-1H20a1,1,0,0,1-1-1V15Z'/></svg>
<svg viewBox='0 0 32 32'><path d='M16,3A13,13,0,0,0,4.53,22.13L3,27.74a1,1,0,0,0,.27,1A1,1,0,0,0,4,29a.84.84,0,0,0,.27,0l5.91-1.65a1,1,0,0,0-.53-1.93L5.42,26.56l1.15-4.3a1,1,0,0,0-.1-.76A11,11,0,1,1,16,27a11.23,11.23,0,0,1-1.84-.15,1,1,0,0,0-1.15.82,1,1,0,0,0,.82,1.15A13,13,0,1,0,16,3Z'/><path d='M15,11.21l-1.16-1.6a2.06,2.06,0,0,0-1.5-.84,2.08,2.08,0,0,0-1.62.6l-1.2,1.2a2.81,2.81,0,0,0-.8,2.08c0,1.77,1.36,4,4,6.6,3.09,3,5.23,4,6.69,4a2.7,2.7,0,0,0,2-.81l1.2-1.2a2,2,0,0,0-.24-3.11L20.8,17a2.09,2.09,0,0,0-1.83-.3l-1.49.47a.53.53,0,0,1-.26-.09,11.42,11.42,0,0,1-2.35-2.26.31.31,0,0,1,0-.11c.13-.44.35-1.15.5-1.64A2,2,0,0,0,15,11.21Zm1.29,7.63a2.33,2.33,0,0,0,1.75.2l1.54-.46,1.61,1.25L20,21c-.48.47-2.25.33-5.86-3.21-3-2.91-3.41-4.5-3.41-5.18A.89.89,0,0,1,11,12l1.28-1.19,1.18,1.65c-.16.49-.39,1.22-.51,1.65A2.12,2.12,0,0,0,13,15.51,11.24,11.24,0,0,0,16.33,18.84Z'/></svg>
<svg viewBox='0 0 32 32'><path d='M29,19.26a1,1,0,0,0,0-.34s0-.05,0-.08a.94.94,0,0,0-.11-.32v0l-8-14A1,1,0,0,0,20,4H12a1,1,0,0,0-.86.5,1,1,0,0,0,0,1L14.85,12,8,24,5.15,19l5.38-9.41a1,1,0,0,0-1.74-1L3.13,18.5a1,1,0,0,0,0,1l4,7,.16.21h0a1,1,0,0,0,.27.19l.08,0A1,1,0,0,0,8,27H24a1,1,0,0,0,.87-.5l4-7a1,1,0,0,0,.09-.22ZM19.42,6l6.86,12h-5.7L13.72,6ZM18.28,18H13.72L16,14Zm5.14,7H9.72l2.86-5h13.7Z'/></svg>
<svg viewBox='0 0 32 32'><path d='M4,21a1,1,0,0,0,0,2,1,1,0,0,1,1,1,1,1,0,0,0,2,0A3,3,0,0,0,4,21Z'/><path d='M28.12,7.88A3,3,0,0,0,26,7H6a3,3,0,0,0-3,3,1,1,0,0,0,2,0A1,1,0,0,1,6,9H26a1,1,0,0,1,1,1V22a1,1,0,0,1-1,1H18a1,1,0,0,0,0,2h8a3,3,0,0,0,3-3V10A3,3,0,0,0,28.12,7.88Z'/><path d='M4,17a1,1,0,0,0,0,2,5,5,0,0,1,5,5,1,1,0,0,0,2,0A7,7,0,0,0,4,17Z'/><path d='M4,13a1,1,0,0,0,0,2,9,9,0,0,1,9,9,1,1,0,0,0,2,0A11,11,0,0,0,4,13Z'/></svg>
<svg viewBox='0 0 32 32'><path d='M16,3a13,13,0,0,0-3.46,25.53,1,1,0,1,0,.53-1.92,11,11,0,1,1,7-.4,15.85,15.85,0,0,0-.3-3.92A6.27,6.27,0,0,0,24.68,16a6.42,6.42,0,0,0-1.05-3.87,7.09,7.09,0,0,0-.4-3.36,1,1,0,0,0-1.1-.67,8,8,0,0,0-3.37,1.28A11.35,11.35,0,0,0,16,9a13.09,13.09,0,0,0-3,.43A5.74,5.74,0,0,0,9.62,8.25a1,1,0,0,0-1,.66,7.06,7.06,0,0,0-.37,3.19A7.15,7.15,0,0,0,7.2,16a6.66,6.66,0,0,0,5,6.28,7.43,7.43,0,0,0-.15.79c-1,.06-1.58-.55-2.32-1.48a3.45,3.45,0,0,0-1.94-1.53,1,1,0,0,0-1.15.76A1,1,0,0,0,7.35,22c.16,0,.55.52.77.81a4.74,4.74,0,0,0,3.75,2.25,4.83,4.83,0,0,0,1.3-.18h0a1,1,0,0,0,.29-.14l0,0a.72.72,0,0,0,.18-.21.34.34,0,0,0,.08-.09.85.85,0,0,0,.06-.17,1.52,1.52,0,0,0,.06-.2v0a4.11,4.11,0,0,1,.46-1.91,1,1,0,0,0-.76-1.65A4.6,4.6,0,0,1,9.2,16a4.84,4.84,0,0,1,.87-3,1,1,0,0,0,.24-.83,5,5,0,0,1,0-1.85,3.59,3.59,0,0,1,1.74.92,1,1,0,0,0,1,.23A12.49,12.49,0,0,1,16,11a9.91,9.91,0,0,1,2.65.43,1,1,0,0,0,1-.18,5,5,0,0,1,2-1,4.11,4.11,0,0,1,0,1.91,1.05,1.05,0,0,0,.32,1A4,4,0,0,1,22.68,16a4.29,4.29,0,0,1-4.41,4.46,1,1,0,0,0-.94.65,1,1,0,0,0,.28,1.11c.59.51.5,4,.47,5.36a1,1,0,0,0,.38.81,1,1,0,0,0,.62.21,1.07,1.07,0,0,0,.25,0A13,13,0,0,0,16,3Z'/></svg>
<svg viewBox='0 0 32 32'><path d='M26,24c-0.552,0-1,0.447-1,1v4H7V17h3h12h3c0.552,0,1-0.447,1-1s-0.448-1-1-1h-2V8c0-3.859-3.14-7-7-7S9,4.141,9,8v7H6 c-0.552,0-1,0.447-1,1v14c0,0.553,0.448,1,1,1h20c0.552,0,1-0.447,1-1v-5C27,24.447,26.552,24,26,24z M11,8c0-2.757,2.243-5,5-5 s5,2.243,5,5v7H11V8z'/><path d='M30.73,15.316c-0.378-0.403-1.011-0.425-1.413-0.047l-10.004,9.361l-4.629-4.332c-0.402-0.377-1.036-0.355-1.413,0.047 c-0.377,0.403-0.356,1.036,0.047,1.414l5.313,4.971c0.192,0.18,0.438,0.27,0.683,0.27s0.491-0.09,0.683-0.27l10.688-10 C31.086,16.353,31.107,15.72,30.73,15.316z'/></svg>

Request Icon

Silahkan tulis dikomentar saran icon yang Anda ingin untuk ditambahkan pada header menu!



Anda mungkin menyukai postingan ini

9 komentar

  1. Auly
    Mas, Gimana cara nampilin link sosmed di sebelah tombol search (versi desktop) ?
  2. ice_two
    Mas Maki, tolong butakan icon untuk privacy policy, disclaimer, dan term and condition juga donk . Terima kasih.
    • Moh Ravi Dwi Putra
      request ikon diatas mas, karena ikon tersebut sangat penting
  3. Indian Boi
    Please provide list of svg icons
  4. Mukesh Kumar
    Instagram svg icon
  5. Fernand
    instagram, fb, dan codepen mas
  6. Download Kitab Pdf
    Icon download
  7. Tosy Caesar K.
    apakah tidak ada icon baru mas?
    • Muhammad Maki
      Bisa di download disini:

      median-ui.jagodesain.com/2020/05/ui-icon.html

      Icon diatas juga cocok untuk template ini