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 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'>Profile</span>
     </a>
   </li>
   <li>
     <a class='table' href='javascript:void(0)' itemprop='url'>
       <svg 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'>Contact</span>
     </a>
   </li>
   <li>
     <a class='table' href='javascript:void(0)' itemprop='url'>
       <svg viewBox='0 0 32 32'><path d='M29,31H19a1,1,0,0,1-1-1.09l2-22A1,1,0,0,1,21,7h6a1,1,0,0,1,1,.91l2,22A1,1,0,0,1,29,31Zm-8.91-2h7.82L26.09,9H21.91Z'/><path d='M19,31H3a1,1,0,0,1-1-1.09l2-22A1,1,0,0,1,5,7H21a1,1,0,0,1,1,1.09l-2,22A1,1,0,0,1,19,31ZM4.09,29h14L19.91,9h-14Z'/><rect height='6' width='2' x='23' y='24'/><path d='M17,13a1,1,0,0,1-1-1V6a3,3,0,0,0-6,0v6a1,1,0,0,1-2,0V6A5,5,0,0,1,18,6v6A1,1,0,0,1,17,13Z'/><path d='M23,9a1,1,0,0,1-1-1V6a3,3,0,0,0-3-3,1,1,0,0,1,0-2,5,5,0,0,1,5,5V8A1,1,0,0,1,23,9Z'/></svg>
       <span class='name'>Buy This Template</span>
     </a>
   </li>
   <li class='dropdown-menu drop'>
     <input class='drop-menu' id='offdrop-menu1' name='dropdown-menu' type='checkbox'/>
     <label class='table' for='offdrop-menu1'>
       <svg 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 <i class='icon icon-dropdown'/></span>
     </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 2</a></li>
       <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Blank Menu 3</a></li>
       <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Blank Menu 4</a></li>
     </ul>
   </li>
   <li class='dropdown-menu more'>
     <input class='drop-menu' id='offdrop-menu5' name='dropdown-menu' type='checkbox'/>
     <label class='table' for='offdrop-menu5'>More <i class='icon icon-dropdown'/></label>
     <ul>
       <li><a href='javascript:void(0)' itemprop='url'>Sitemaps</a></li>
       <li><a href='javascript:void(0)' itemprop='url'>Disclamer</a></li>
       <li><a href='javascript:void(0)' itemprop='url'>Privacy</a></li>
     </ul>
   </li>
   <li class='sosmed-link'>
     <div class='sosmed-cont'>
       <a href='javascript:void(0)' itemprop='url' rel='noopener' target='_blank' title='Facebook'>
         <svg viewBox='0 0 32 32'><path d='M24,3H8A5,5,0,0,0,3,8V24a5,5,0,0,0,5,5h8a1,1,0,0,0,1-1V20a1,1,0,0,0-1-1H15V17h1a1,1,0,0,0,1-1V12.5A2.5,2.5,0,0,1,19.5,10H22v2H21a2,2,0,0,0-2,2v2a1,1,0,0,0,1,1h1.72l-.5,2H20a1,1,0,0,0-1,1v4a1,1,0,0,0,2,0V21h1a1,1,0,0,0,1-.76l1-4a1,1,0,0,0-.18-.86A1,1,0,0,0,23,15H21V14h2a1,1,0,0,0,1-1V9a1,1,0,0,0-1-1H19.5A4.51,4.51,0,0,0,15,12.5V15H14a1,1,0,0,0-1,1v4a1,1,0,0,0,1,1h1v6H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H24a3,3,0,0,1,3,3V24a3,3,0,0,1-3,3H20a1,1,0,0,0,0,2h4a5,5,0,0,0,5-5V8A5,5,0,0,0,24,3Z'/></svg>
       </a>
       <a href='javascript:void(0)' itemprop='url' rel='noopener' target='_blank' title='Instagram'>
         <svg viewBox='0 0 32 32'><path d='M20.45,13.32a1,1,0,0,0-.57,1.3,4,4,0,1,1-2.31-2.3,1,1,0,1,0,.71-1.87,6,6,0,0,0-6.37,9.85,6,6,0,0,0,8.48,0,6,6,0,0,0,1.36-6.41A1,1,0,0,0,20.45,13.32Z'/><circle cx='23' cy='9' r='1'/><path d='M28,9a5,5,0,0,0-4.9-5h0A77.11,77.11,0,0,0,9,4,5,5,0,0,0,4,8.92,91.91,91.91,0,0,0,4,23a5,5,0,0,0,4.9,5h0c2.36.22,4.73.34,7.1.34s4.71-.11,7.05-.34A5,5,0,0,0,28,23.08,87.09,87.09,0,0,0,28,9ZM26,23a3,3,0,0,1-3,3h-.1A71.73,71.73,0,0,1,9,26a3,3,0,0,1-3-3.08A92.4,92.4,0,0,1,6,9,3,3,0,0,1,9.09,6q3.44-.31,6.9-.32T23,6a3,3,0,0,1,3,3.08A85.13,85.13,0,0,1,26,23Z'/></svg>
       </a>
       <a href='javascript:void(0)' itemprop='url' rel='noopener' target='_blank' title='Twitter'>
         <svg viewBox='0 0 32 32'><path d='M28.77,8.11a.87.87,0,0,0-.23-.2A4.69,4.69,0,0,0,29,6.54a1,1,0,0,0-.44-1,1,1,0,0,0-1.1,0,6.42,6.42,0,0,1-2.28.92,6.21,6.21,0,0,0-7.08-1A6.07,6.07,0,0,0,15,12.2a1,1,0,0,0,2-.4A4.08,4.08,0,0,1,19,7.28a4.24,4.24,0,0,1,5.12,1,1,1,0,0,0,.88.28l.25,0a1,1,0,0,0,.34,1.62,1,1,0,0,0-.36.88,13.07,13.07,0,0,1-4.89,11.24A12.75,12.75,0,0,1,7.69,24.61a9.06,9.06,0,0,0,4.54-2.18,1,1,0,0,0,.15-1.09,1,1,0,0,0-.93-.57,4,4,0,0,1-3-1.39,3.63,3.63,0,0,0,1-.35A1,1,0,0,0,10,18a1,1,0,0,0-.76-.84,4.42,4.42,0,0,1-3-2.48c.24,0,.48.05.74.06a1,1,0,0,0,1-.62A1,1,0,0,0,7.67,13C6,11.48,5.59,9.85,5.83,8.7a13.88,13.88,0,0,0,7,4,1,1,0,1,0,.38-2A12.1,12.1,0,0,1,6.39,6.31a1,1,0,0,0-.75-.38,1,1,0,0,0-.78.33,5.34,5.34,0,0,0-.31,6l-.09,0a1,1,0,0,0-.52.81,5.84,5.84,0,0,0,1.95,4.47,1,1,0,0,0-.18,1,6.63,6.63,0,0,0,3.18,3.57A13.89,13.89,0,0,1,4,23a1,1,0,0,0-.5,1.86A16.84,16.84,0,0,0,12,27.35a15.16,15.16,0,0,0,9.6-3.57,15.12,15.12,0,0,0,5.69-12.42,4.62,4.62,0,0,0,1.62-2.25A1,1,0,0,0,28.77,8.11Z'/></svg>
       </a>
       <a href='javascript:void(0)' itemprop='url' rel='noopener' target='_blank' title='Youtube'>
         <svg viewBox='0 0 32 32'><path d='M30,12a5.71,5.71,0,0,0-5.31-5.7C18.92,6,13.06,6,7.33,6.28,4.51,6.28,2,9,2,12a43.69,43.69,0,0,0,0,8.72,5.32,5.32,0,0,0,5.28,5.33h0q4.35.24,8.72.24t8.67-.23A5.34,5.34,0,0,0,30,20.8,31.67,31.67,0,0,0,30,12Zm-2,8.63a.49.49,0,0,0,0,.12,3.36,3.36,0,0,1-3.39,3.34,166,166,0,0,1-17.28,0A3.36,3.36,0,0,1,4,20.65a42,42,0,0,1,0-8.47.45.45,0,0,0,0-.11A3.78,3.78,0,0,1,7.38,8.28c2.86-.13,5.74-.19,8.62-.19s5.76.06,8.62.19h.05c1.71,0,3.33,1.84,3.33,3.79a.76.76,0,0,0,0,.15A30.11,30.11,0,0,1,28,20.61Z'/><path d='M20.79,15.51l-7.14-3.68a1,1,0,1,0-.92,1.78l5.43,2.79-4,2.07V16.4a1,1,0,0,0-2,0v3.72a1,1,0,0,0,1,1,1,1,0,0,0,.46-.11l7.14-3.72a1,1,0,0,0,.54-.89A1,1,0,0,0,20.79,15.51Z'/></svg>
       </a>
       <a href='javascript:void(0)' itemprop='url' rel='noopener' target='_blank' title='Medium'>
         <svg viewBox='0 0 32 32'><path d='M27,23.09V13.5a1,1,0,0,0-2,0v10a1,1,0,0,0,.29.71l.3.29H20.41l.3-.29A1,1,0,0,0,21,23.5v-10a1,1,0,0,0-1.92-.38l-4.6,11L7.91,10.08A1.08,1.08,0,0,0,7.8,9.9L6,7.5h4.38L15.11,17a1,1,0,0,0,.93.55,1,1,0,0,0,.89-.63L20.68,7.5h4.91l-.3.29A1,1,0,0,0,25,8.5v1a1,1,0,0,0,2,0V8.91l1.71-1.7a1,1,0,0,0,.21-1.09A1,1,0,0,0,28,5.5H20a1,1,0,0,0-.93.63L15.9,14.06l-4-8A1,1,0,0,0,11,5.5H4a1,1,0,0,0-.89.55,1,1,0,0,0,.09,1L6.14,11l.36.77V20.5L3.2,24.9A1,1,0,0,0,3.11,26,1,1,0,0,0,4,26.5h7a1,1,0,0,0,.89-.55,1,1,0,0,0-.09-1.05L8.5,20.5V16.08l4.59,9.84a1,1,0,0,0,.91.58h1a1,1,0,0,0,.92-.62L19,18.5v4.59l-1.71,1.7a1,1,0,0,0-.21,1.09,1,1,0,0,0,.92.62H28a1,1,0,0,0,.92-.62,1,1,0,0,0-.21-1.09ZM6,24.5l1.5-2,1.5,2Z'/></svg>
       </a>
     </div>
   </li>
 </ul>


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

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 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'>Profile</span>
     </a>
   </li>
   <li>
     <a class='table' href='javascript:void(0)' itemprop='url'>
       <svg 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'>Contact</span>
     </a>
   </li>
   <li>
     <a class='table' href='javascript:void(0)' itemprop='url'>
       <svg viewBox='0 0 32 32'><path d='M29,31H19a1,1,0,0,1-1-1.09l2-22A1,1,0,0,1,21,7h6a1,1,0,0,1,1,.91l2,22A1,1,0,0,1,29,31Zm-8.91-2h7.82L26.09,9H21.91Z'/><path d='M19,31H3a1,1,0,0,1-1-1.09l2-22A1,1,0,0,1,5,7H21a1,1,0,0,1,1,1.09l-2,22A1,1,0,0,1,19,31ZM4.09,29h14L19.91,9h-14Z'/><rect height='6' width='2' x='23' y='24'/><path d='M17,13a1,1,0,0,1-1-1V6a3,3,0,0,0-6,0v6a1,1,0,0,1-2,0V6A5,5,0,0,1,18,6v6A1,1,0,0,1,17,13Z'/><path d='M23,9a1,1,0,0,1-1-1V6a3,3,0,0,0-3-3,1,1,0,0,1,0-2,5,5,0,0,1,5,5V8A1,1,0,0,1,23,9Z'/></svg>
       <span class='name'>Buy This Template</span>
     </a>
   </li>
   <li class='dropdown-menu drop'>
     <input class='drop-menu' id='offdrop-menu1' name='dropdown-menu' type='checkbox'/>
     <label class='table' for='offdrop-menu1'>
       <svg 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 <i class='icon icon-dropdown'/></span>
     </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 2</a></li>
       <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Blank Menu 3</a></li>
       <li itemprop='name'><a href='javascript:void(0)' itemprop='url'>Blank Menu 4</a></li>
     </ul>
   </li>
   <li class='dropdown-menu more'>
     <input class='drop-menu' id='offdrop-menu5' name='dropdown-menu' type='checkbox'/>
     <label class='table' for='offdrop-menu5'>More <i class='icon icon-dropdown'/></label>
     <ul>
       <li><a href='javascript:void(0)' itemprop='url'>Sitemaps</a></li>
       <li><a href='javascript:void(0)' itemprop='url'>Disclamer</a></li>
       <li><a href='javascript:void(0)' itemprop='url'>Privacy</a></li>
     </ul>
   </li>
   <li class='sosmed-link'>
     <div class='sosmed-cont'>
       <a href='javascript:void(0)' itemprop='url' rel='noopener' target='_blank' title='Facebook'>
         <svg viewBox='0 0 32 32'><path d='M24,3H8A5,5,0,0,0,3,8V24a5,5,0,0,0,5,5h8a1,1,0,0,0,1-1V20a1,1,0,0,0-1-1H15V17h1a1,1,0,0,0,1-1V12.5A2.5,2.5,0,0,1,19.5,10H22v2H21a2,2,0,0,0-2,2v2a1,1,0,0,0,1,1h1.72l-.5,2H20a1,1,0,0,0-1,1v4a1,1,0,0,0,2,0V21h1a1,1,0,0,0,1-.76l1-4a1,1,0,0,0-.18-.86A1,1,0,0,0,23,15H21V14h2a1,1,0,0,0,1-1V9a1,1,0,0,0-1-1H19.5A4.51,4.51,0,0,0,15,12.5V15H14a1,1,0,0,0-1,1v4a1,1,0,0,0,1,1h1v6H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H24a3,3,0,0,1,3,3V24a3,3,0,0,1-3,3H20a1,1,0,0,0,0,2h4a5,5,0,0,0,5-5V8A5,5,0,0,0,24,3Z'/></svg>
       </a>
       <a href='javascript:void(0)' itemprop='url' rel='noopener' target='_blank' title='Instagram'>
         <svg viewBox='0 0 32 32'><path d='M20.45,13.32a1,1,0,0,0-.57,1.3,4,4,0,1,1-2.31-2.3,1,1,0,1,0,.71-1.87,6,6,0,0,0-6.37,9.85,6,6,0,0,0,8.48,0,6,6,0,0,0,1.36-6.41A1,1,0,0,0,20.45,13.32Z'/><circle cx='23' cy='9' r='1'/><path d='M28,9a5,5,0,0,0-4.9-5h0A77.11,77.11,0,0,0,9,4,5,5,0,0,0,4,8.92,91.91,91.91,0,0,0,4,23a5,5,0,0,0,4.9,5h0c2.36.22,4.73.34,7.1.34s4.71-.11,7.05-.34A5,5,0,0,0,28,23.08,87.09,87.09,0,0,0,28,9ZM26,23a3,3,0,0,1-3,3h-.1A71.73,71.73,0,0,1,9,26a3,3,0,0,1-3-3.08A92.4,92.4,0,0,1,6,9,3,3,0,0,1,9.09,6q3.44-.31,6.9-.32T23,6a3,3,0,0,1,3,3.08A85.13,85.13,0,0,1,26,23Z'/></svg>
       </a>
       <a href='javascript:void(0)' itemprop='url' rel='noopener' target='_blank' title='Twitter'>
         <svg viewBox='0 0 32 32'><path d='M28.77,8.11a.87.87,0,0,0-.23-.2A4.69,4.69,0,0,0,29,6.54a1,1,0,0,0-.44-1,1,1,0,0,0-1.1,0,6.42,6.42,0,0,1-2.28.92,6.21,6.21,0,0,0-7.08-1A6.07,6.07,0,0,0,15,12.2a1,1,0,0,0,2-.4A4.08,4.08,0,0,1,19,7.28a4.24,4.24,0,0,1,5.12,1,1,1,0,0,0,.88.28l.25,0a1,1,0,0,0,.34,1.62,1,1,0,0,0-.36.88,13.07,13.07,0,0,1-4.89,11.24A12.75,12.75,0,0,1,7.69,24.61a9.06,9.06,0,0,0,4.54-2.18,1,1,0,0,0,.15-1.09,1,1,0,0,0-.93-.57,4,4,0,0,1-3-1.39,3.63,3.63,0,0,0,1-.35A1,1,0,0,0,10,18a1,1,0,0,0-.76-.84,4.42,4.42,0,0,1-3-2.48c.24,0,.48.05.74.06a1,1,0,0,0,1-.62A1,1,0,0,0,7.67,13C6,11.48,5.59,9.85,5.83,8.7a13.88,13.88,0,0,0,7,4,1,1,0,1,0,.38-2A12.1,12.1,0,0,1,6.39,6.31a1,1,0,0,0-.75-.38,1,1,0,0,0-.78.33,5.34,5.34,0,0,0-.31,6l-.09,0a1,1,0,0,0-.52.81,5.84,5.84,0,0,0,1.95,4.47,1,1,0,0,0-.18,1,6.63,6.63,0,0,0,3.18,3.57A13.89,13.89,0,0,1,4,23a1,1,0,0,0-.5,1.86A16.84,16.84,0,0,0,12,27.35a15.16,15.16,0,0,0,9.6-3.57,15.12,15.12,0,0,0,5.69-12.42,4.62,4.62,0,0,0,1.62-2.25A1,1,0,0,0,28.77,8.11Z'/></svg>
       </a>
       <a href='javascript:void(0)' itemprop='url' rel='noopener' target='_blank' title='Youtube'>
         <svg viewBox='0 0 32 32'><path d='M30,12a5.71,5.71,0,0,0-5.31-5.7C18.92,6,13.06,6,7.33,6.28,4.51,6.28,2,9,2,12a43.69,43.69,0,0,0,0,8.72,5.32,5.32,0,0,0,5.28,5.33h0q4.35.24,8.72.24t8.67-.23A5.34,5.34,0,0,0,30,20.8,31.67,31.67,0,0,0,30,12Zm-2,8.63a.49.49,0,0,0,0,.12,3.36,3.36,0,0,1-3.39,3.34,166,166,0,0,1-17.28,0A3.36,3.36,0,0,1,4,20.65a42,42,0,0,1,0-8.47.45.45,0,0,0,0-.11A3.78,3.78,0,0,1,7.38,8.28c2.86-.13,5.74-.19,8.62-.19s5.76.06,8.62.19h.05c1.71,0,3.33,1.84,3.33,3.79a.76.76,0,0,0,0,.15A30.11,30.11,0,0,1,28,20.61Z'/><path d='M20.79,15.51l-7.14-3.68a1,1,0,1,0-.92,1.78l5.43,2.79-4,2.07V16.4a1,1,0,0,0-2,0v3.72a1,1,0,0,0,1,1,1,1,0,0,0,.46-.11l7.14-3.72a1,1,0,0,0,.54-.89A1,1,0,0,0,20.79,15.51Z'/></svg>
       </a>
       <a href='javascript:void(0)' itemprop='url' rel='noopener' target='_blank' title='Medium'>
         <svg viewBox='0 0 32 32'><path d='M27,23.09V13.5a1,1,0,0,0-2,0v10a1,1,0,0,0,.29.71l.3.29H20.41l.3-.29A1,1,0,0,0,21,23.5v-10a1,1,0,0,0-1.92-.38l-4.6,11L7.91,10.08A1.08,1.08,0,0,0,7.8,9.9L6,7.5h4.38L15.11,17a1,1,0,0,0,.93.55,1,1,0,0,0,.89-.63L20.68,7.5h4.91l-.3.29A1,1,0,0,0,25,8.5v1a1,1,0,0,0,2,0V8.91l1.71-1.7a1,1,0,0,0,.21-1.09A1,1,0,0,0,28,5.5H20a1,1,0,0,0-.93.63L15.9,14.06l-4-8A1,1,0,0,0,11,5.5H4a1,1,0,0,0-.89.55,1,1,0,0,0,.09,1L6.14,11l.36.77V20.5L3.2,24.9A1,1,0,0,0,3.11,26,1,1,0,0,0,4,26.5h7a1,1,0,0,0,.89-.55,1,1,0,0,0-.09-1.05L8.5,20.5V16.08l4.59,9.84a1,1,0,0,0,.91.58h1a1,1,0,0,0,.92-.62L19,18.5v4.59l-1.71,1.7a1,1,0,0,0-.21,1.09,1,1,0,0,0,.92.62H28a1,1,0,0,0,.92-.62,1,1,0,0,0-.21-1.09ZM6,24.5l1.5-2,1.5,2Z'/></svg>
       </a>
     </div>
   </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>

Request Icon

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



1 komentar

  1. Mas, Gimana cara nampilin link sosmed di sebelah tombol search (versi desktop) ?

    BalasHapus

Posting Komentar