Home

Cara Mengubah Header Menu (Expert)

Admin
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!



You may like these posts