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!



Baca juga

1 komentar

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

    BalasHapus

Posting Komentar