VEzcwOIzJo2ocMRnvNfZmXylSxSqdBdXDBtRZkxw
Bookmark

Cara membuat Menu Navigasi Seperti Igniel di Viomagz

Serieswans.com - Siapa yang tak kenal dengan mba igniel, selaku owner dari igniel.com yang banyak di bicarakan para blogger. karena desain dari blog mba igniel ini yang sangat keren, responsif dan terkesan berbeda dari templae yang lainnya. dari segi kecepatan juga sudah optimal dan page sizenya tidak terlalu besar. 

banyak para bloggger yang ingin meniru desain dari blognya mba igniel, contohnya desain dari menu navigasi di versi mobilenya. nah pada kesempatan kali ini juga saya akan membahas mengenai cara membuat menu navigasi seperti blog mba igniel. tapi sebelum itu, apakah kalian tau apa itu Menu Navigasi ?

Menu Navigasi / Navigation merupakan salah satu komponen yang paling penting dalam sebuah website/blog, salah satu manfaat dari menu navigasi ini adalah mempercepat untuk mendapatkan sitelink, dengan adanya menu navigasi maka blog/website semakin cepat mendapatkan sitelink karena beberapa sitelink yang muncul di halaman pencarian adalah berasal dari menu navigasi. oleh karena itu menu navigasi ini juga sangat berpengaruh lho untuk anda ingin mendapatakn sitelink dari google. 

oke kita lanjut ke pembahasan mengenai menu navigasi yang akan kita pasang, anda bisa lihat demo dari menu navigasinya pada gambar di bawah ini.

Nah, bagi anda yang tertarik untuk memasang menu navigasi seperti blog mba igniel, silahkan ikuti langkah-langkah di bawah ini.
Cara membuat Menu Navigasi Seperti Igniel di Viomagz

Cara membuat Menu Navigasi Seperti Igniel di Viomagz


1. Masuk ke akun blogger.com
2. Pilih menu Tema => Edit HTML
3. Selanjutnya copy kode CSS di bawah ini dan letakan di atas kode ]]></b:skin> atau </style>
/* Nav Mobile */
.NavMobile{visibility:hidden;opacity:0;position:fixed;top:48px;background:rgba(0,0,0,.59);left:0;right:0;bottom:0;margin:0;z-index:5;transition:all .4s ease-in-out}.NavMobile.open{visibility:visible;opacity:1}#nav-wrapper{font-size:13px;width:265px;position:fixed;z-index:5;top:70px;overflow:hidden;left:0;background:#fff;-webkit-transition:.3s;-o-transition:.3s;transition:.3s;bottom:0;padding-top:15px;-webkit-transform:translateX(-290px);-ms-transform:translateX(-290px);transform:translateX(-290px);transition:all .5s ease}#nav-wrapper:hover{overflow-y:auto}#nav-wrapper.open{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}#nav-wrapper ul{margin:0;padding:0;list-style:none}#nav-wrapper li{display:block;list-style:none;position:relative}#nav-wrapper li.first{background:#d0d0d0;border-radius:0 50px 50px 0;margin:0 20px 0 0;transition:all .5s ease}#nav-wrapper>ul>li>a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:10px 0 10px 24px;color:#333;font-size:13px}#nav-wrapper li a.nav-submenu{padding:10px 24px}#nav-wrapper li ul.nav-sub{display:none}#nav-wrapper li li a{display:block;position:relative;padding-left:5em;line-height:40px;color:#657786}#nav-wrapper a:hover{color:teal}#nav-wrapper svg.down{margin-right:0;margin-left:15px;display:block;-webkit-transition:all .4s ease;-o-transition:all .4s ease;transition:all .4s ease}#nav-wrapper li.open svg.down{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}#nav-wrapper svg{height:24px;width:24px;margin-right:15px;overflow:hidden;opacity:1.7;fill:#000}#nav-wrapper>ul>li:not(.colormode)>a>span:not(.new){-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-flex:1;-ms-flex:1 1;flex:1 1}#nav-wrapper>ul>li>a>span>span.new{background:#1a73e8;color:#fff;line-height:normal;margin-left:10px;font-size:8px;padding:3px 10px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px}@media only screen and (max-width:480px){#nav-wrapper .profile img{width:24px;height:24px;margin-right:15px;margin-left:1px;border-radius:20px}}@media screen and (max-width:600px){#nav-wrapper .subs{display:flex;margin-left:24px;margin-top:10px}#nav-wrapper .subs a{font-size:11px;margin-right:10px;width:auto;height:auto;padding:7px 10px;margin-top:0;background-color:#657786;color:#fff;border-radius:20px}#nav-wrapper .subs svg{width:12px;height:12px;margin-right:3px;margin-top:-1px;fill:#fff}#nav-wrapper .subs button{flex-grow:1;margin-top:0;width:auto;height:auto;padding:7px 10px;display:flex;align-items:center;justify-content:center;background-color:#657786;border-radius:20px;border:none;margin-right:23px;color:#fff;outline:0}#nav-wrapper li.footer a{font-size:11px;font-weight:400;color:#657786;display:inline-block;padding:0}#nav-wrapper .footer{display:block;margin-top:14px;margin-left:24px}#nav-wrapper .footer .social{display:flex;margin:7px 0}#nav-wrapper .footer .credit{display:block;color:#657786}#nav-wrapper .footer .developer{color:#657786}}@media screen and (max-width:800px){#nav-wrapper .subs{display:flex;margin-left:24px;margin-top:10px}.Profile .widget-content{margin:0;max-width:100%}#nav-wrapper .subs a{font-size:11px;margin-right:10px;width:auto;height:auto;padding:7px 10px;margin-top:0;background-color:#657786;color:#fff;border-radius:20px}#nav-wrapper .subs svg{width:12px;height:12px;margin-right:3px;margin-top:-1px}#nav-wrapper .subs button{flex-grow:1;margin-top:0;width:auto;height:auto;padding:7px 10px;display:flex;align-items:center;justify-content:center;background-color:#657786;border-radius:20px;border:none;margin-right:23px;color:#fff;outline:0}#nav-wrapper li.footer a{font-size:11px;font-weight:400;color:#657786;display:inline-block;padding:0}#nav-wrapper .footer{display:block;margin-top:14px;margin-left:24px}#nav-wrapper .footer .social{display:flex;margin:7px 0}#nav-wrapper .footer .credit{display:block;color:#657786}#nav-wrapper .footer .developer{color:#657786}}.kotak9{fill:#fff;margin-top:-4px;display:none}@media screen and (max-width:800px){.kotak9{fill:#fff;margin-top:-4px;display:block}}.muter3{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}
4. Kemudian cari kode <nav id='cssmenu'> sampai kode penutupnya </nav> , lalu hapus kode tersebut dan ganti dengan kode di bawah ini

<div class='NavMobile'/>
<nav class=';' id='nav-wrapper' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<ul>
<li class='first'>
<a href='/'>
<span itemprop='name'>
<svg height='24' viewBox='0 0 24 24' width='24'>
<path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10ZZ' fill='#000'/>
</svg>Beranda</span></a></li>
<li>
<a class='nav-submenu' href='javascript:;' title='Bahasa Program'>
<span>
<svg height='24' viewBox='0 0 24 24' width='24'>
<path d='M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z'>
</path>
</svg>
Topik
<span class='new'>
News
</span>
</span>
<svg class='down' height='24' viewBox='0 0 24 24' width='24'>
<path d='M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M12,10.5A1.5,1.5 0 0,1 13.5,12A1.5,1.5 0 0,1 12,13.5A1.5,1.5 0 0,1 10.5,12A1.5,1.5 0 0,1 12,10.5M7.5,10.5A1.5,1.5 0 0,1 9,12A1.5,1.5 0 0,1 7.5,13.5A1.5,1.5 0 0,1 6,12A1.5,1.5 0 0,1 7.5,10.5M16.5,10.5A1.5,1.5 0 0,1 18,12A1.5,1.5 0 0,1 16.5,13.5A1.5,1.5 0 0,1 15,12A1.5,1.5 0 0,1 16.5,10.5ZZ'/>
</svg>
</a>
<ul class='nav-sub'>
<li>
<a href='/search/label/Adsense' itemprop='url'>
<span itemprop='name'>
<svg style='width:20x;height:24px' viewBox='0 0 512 512'>
<g>
<path d='M425.19,7.392C422.246,2.784,417.158,0,411.686,0h-160c-6.208,0-11.872,3.584-14.496,9.248l-224,480    c-2.304,4.96-1.952,10.752,0.992,15.36c2.944,4.608,8.032,7.392,13.504,7.392h160c6.208,0,11.872-3.584,14.496-9.216l224-480    C428.486,17.824,428.134,12,425.19,7.392z'/>
</g>
<g>
<path d='M497.798,263.392c-2.912-4.608-8.032-7.392-13.472-7.392H352.678L233.222,512h146.464c6.208,0,11.872-3.584,14.496-9.216 l104.64-224C501.126,273.824,500.742,268,497.798,263.392z'/>
</g>
</svg>
Adsense
</span>
</a>
</li>
<li>
<a href='/search/label/Blogger' itemprop='url'>
<span itemprop='name'>
<svg class='muter2' style='width:20px;height:20px' viewBox='0 0 24 24'>
<path d='M14,13H9.95A1,1 0 0,0 8.95,14A1,1 0 0,0 9.95,15H14A1,1 0 0,0 15,14A1,1 0 0,0 14,13M9.95,10H12.55A1,1 0 0,0 13.55,9A1,1 0 0,0 12.55,8H9.95A1,1 0 0,0 8.95,9A1,1 0 0,0 9.95,10M16,9V10A1,1 0 0,0 17,11A1,1 0 0,1 18,12V15A3,3 0 0,1 15,18H9A3,3 0 0,1 6,15V8A3,3 0 0,1 9,5H13A3,3 0 0,1 16,8M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z'/>
</svg>
Blogger
</span>
</a>
</li>
<li>
<a href='/search/label/Internet' itemprop='url'>
<span itemprop='name'>
<svg class='muter2' style='width:20px;height:20px' viewBox='0 0 24 24'>
<path d='M6,6.9L3.87,4.78L5.28,3.37L7.4,5.5L6,6.9M13,1V4H11V1H13M20.13,4.78L18,6.9L16.6,5.5L18.72,3.37L20.13,4.78M4.5,10.5V12.5H1.5V10.5H4.5M19.5,10.5H22.5V12.5H19.5V10.5M6,20H18A2,2 0 0,1 20,22H4A2,2 0 0,1 6,20M12,5A6,6 0 0,1 18,11V19H6V11A6,6 0 0,1 12,5M12,7A4,4 0 0,0 8,11V17H16V11A4,4 0 0,0 12,7Z'/>
</svg>
Internet
</span>
</a>
</li>
<li>
<a href='/search/label/Komputer' itemprop='url'>
<span itemprop='name'>
<svg class='muter2' style='width:20px;height:20px' viewBox='0 0 24 24'>
<path d='M22,17H18V10H22M23,8H17A1,1 0 0,0 16,9V19A1,1 0 0,0 17,20H23A1,1 0 0,0 24,19V9A1,1 0 0,0 23,8M4,6H22V4H4A2,2 0 0,0 2,6V17H0V20H14V17H4V6Z'/>
</svg>
Komputer
</span>
</a>
</li>
<li>
<a href='/search/label/Android' itemprop='url'>
<span itemprop='name'>
<svg class='muter2' style='width:20px;height:20px' viewBox='0 0 24 24'>
<path d='M15,9A1,1 0 0,1 14,8A1,1 0 0,1 15,7A1,1 0 0,1 16,8A1,1 0 0,1 15,9M9,9A1,1 0 0,1 8,8A1,1 0 0,1 9,7A1,1 0 0,1 10,8A1,1 0 0,1 9,9M16.12,4.37L18.22,2.27L17.4,1.44L15.09,3.75C14.16,3.28 13.11,3 12,3C10.88,3 9.84,3.28 8.91,3.75L6.6,1.44L5.78,2.27L7.88,4.37C6.14,5.64 5,7.68 5,10V11H19V10C19,7.68 17.86,5.64 16.12,4.37M5,16C5,19.86 8.13,23 12,23A7,7 0 0,019,16V12H5V16Z'/>
</svg>
Android
</span>
</a>
</li>
<li>
<a href='/search/label/Youtube' itemprop='url'>
<span itemprop='name'>
<svg class='muter3' viewBox='0 0 24 24'>
<path d='M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z'/>
</svg>
Youtube
</span>
</a>
</li>
<li>
<a href='/search/label/Bisnis' itemprop='url'>
<span itemprop='name'>
<svg class='muter2' viewBox='0 0 24 24'>
<path d='M18.61,5.89C18.6,5.79 18.5,5.73 18.44,5.73C18.37,5.72 16.83,5.61 16.83,5.61C16.83,5.61 15.76,4.55 15.65,4.43C15.53,4.31 15.3,4.35 15.21,4.37C15.2,4.37 15,4.44 14.61,4.55C14.25,3.5 13.62,2.58 12.43,2.58C12.11,2.18 11.72,2 11.38,2C8.8,2 7.57,5.22 7.18,6.86C6.18,7.17 5.47,7.39 5.37,7.42C4.82,7.6 4.8,7.62 4.73,8.14C4.67,8.54 3.21,19.86 3.21,19.86L14.61,22L20.79,20.66C20.79,20.66 18.62,6 18.61,5.89M14,4.76C13.69,4.85 13.37,4.95 13,5.06C13,5 13,4.93 13,4.85C13,4.21 12.93,3.7 12.79,3.29C13.35,3.36 13.73,4 14,4.76M12.08,3.42C12.24,3.82 12.34,4.39 12.34,5.16C12.34,5.2 12.34,5.24 12.34,5.27C11.71,5.46 11.03,5.68 10.35,5.89C10.73,4.4 11.45,3.69 12.08,3.42M11.31,2.69C11.42,2.69 11.53,2.73 11.64,2.8C10.81,3.19 9.93,4.17 9.55,6.12C9,6.3 8.47,6.46 8,6.62C8.42,5.12 9.46,2.69 11.31,2.69M12.5,9.15L11.76,11.42C11.76,11.42 11.09,11.06 10.27,11.06C9.07,11.06 9,11.81 9,12C9,13.04 11.71,13.43 11.71,15.86C11.71,17.77 10.5,19 8.87,19C6.91,19 5.91,17.78 5.91,17.78L6.43,16.05C6.43,16.05 7.46,16.93 8.33,16.93C8.9,16.93 9.13,16.5 9.13,16.16C9.13,14.81 6.92,14.75 6.92,12.53C6.92,10.66 8.26,8.85 10.97,8.85C12,8.85 12.5,9.15 12.5,9.15M15.43,5.29L16.75,6.6L17.71,6.68C18.05,9 19.19,16.73 19.66,19.88L14.66,20.97L15.43,5.29Z'/>
</svg>
Bisnis
</span>
</a>
</li>
<li>
<a href='/search/label/Games' itemprop='url'>
<span itemprop='name'>
<svg class='muter2' style='width:20px;height:20px' viewBox='0 0 24 24'>
<path d='M17.5,7A5.5,5.5 0 0,1 23,12.5A5.5,5.5 0 0,1 17.5,18C15.79,18 14.27,17.22 13.26,16H10.74C9.73,17.22 8.21,18 6.5,18A5.5,5.5 0 0,1 1,12.5A5.5,5.5 0 0,1 6.5,7H17.5M6.5,9A3.5,3.5 0 0,0 3,12.5A3.5,3.5 0 0,0 6.5,16C7.9,16 9.1,15.18 9.66,14H14.34C14.9,15.18 16.1,16 17.5,16A3.5,3.5 0 0,0 21,12.5A3.5,3.5 0 0,0 17.5,9H6.5M5.75,10.25H7.25V11.75H8.75V13.25H7.25V14.75H5.75V13.25H4.25V11.75H5.75V10.25M16.75,12.5A1,1 0 0,1 17.75,13.5A1,1 0 0,1 16.75,14.5A1,1 0 0,1 15.75,13.5A1,1 0 0,1 16.75,12.5M18.75,10.5A1,1 0 0,1 19.75,11.5A1,1 0 0,1 18.75,12.5A1,1 0 0,1 17.75,11.5A1,1 0 0,1 18.75,10.5Z'/>
</svg>
Games
</span>
</a>
</li>
</ul>
</li>
<li>
<a href='/search/label/Template' itemprop='url'>
<span itemprop='name'>
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M21,16V4H3V16H21M21,2A2,2 0 0,1 23,4V16A2,2 0 0,1 21,18H14V20H16V22H8V20H10V18H3C1.89,18 1,17.1 1,16V4C1,2.89 1.89,2 3,2H21M5,6H14V11H5V6M15,6H19V8H15V6M19,9V14H15V9H19M5,12H9V14H5V12M10,12H14V14H10V12ZZ'/>
</svg>
Template
</span>
</a>
</li>
<li>
<a href='/p/mengenal-apa-itu-guest-post-atau.html' itemprop='url'>
<span itemprop='name'>
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M8,12H16V14H8V12M10,20H6V4H13V9H18V12.1L20,10.1V8L14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H10V20M8,18H12.1L13,17.1V16H8V18M20.2,13C20.3,13 20.5,13.1 20.6,13.2L21.9,14.5C22.1,14.7 22.1,15.1 21.9,15.3L20.9,16.3L18.8,14.2L19.8,13.2C19.9,13.1 20,13 20.2,13M20.2,16.9L14.1,23H12V20.9L18.1,14.8L20.2,16.9Z'/>
</svg>
Penulis Tamu
</span>
</a>
</li>
<li>
<a href='/p/about.html' itemprop='url'>
<span itemprop='name'>
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z'/>
</svg>
Tentang
</span>
</a>
</li>
<li class='subs'>
<a href='https://www.blogger.com/follow.g?view=FOLLOW&amp;blogID=598481566997471472' rel='nofollow noopener' target='_blank' title='Ikuti Blog'>
<svg viewBox='0 0 24 24'><path d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z'/></svg>
<span>
FOLLOW
</span>
</a>
<a href='#' rel='nofollow noopener' target='_blank' title='Ikuti Blog'>
<svg class='widget12' viewBox='0 0 24 24'><path d='M16,17H7V10.5C7,8 9,6 11.5,6C14,6 16,8 16,10.5M18,16V10.5C18,7.43 15.86,4.86 13,4.18V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V4.18C7.13,4.86 5,7.43 5,10.5V16L3,18V19H20V18M11.5,22A2,2 0 0,0 13.5,20H9.5A2,2 0 0,0 11.5,22Z'/></svg>
<span>
BERLANGGANAN
</span>
</a>
</li>
<li class='footer'>
<a href='/p/blog-page_2.html' itemprop='url' title='Sitemap'>
<span itemprop='name'>
Sitemap
</span>
</a>
-
<a href='/p/blog-page_61.html' itemprop='url' title='Disclaimer'>
<span itemprop='name'>
Disclaimer
</span>
</a>
-
<a href='/p/blog-page_25.html' itemprop='url' title='Privacy Policy'>
<span itemprop='name'>
Privacy
</span>
</a>
<span class='social'>
<a class='facebook2' href='https://www.facebook.com/Kurniawanz11' rel='nofollow noopener' target='_blank' title='Facebook'>
<svg viewBox='0 0 24 24'><path d='M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z'/></svg>
</a>
<a class='instagram' href='https://www.instagram.com/kurniawanz79/' rel='nofollow noopener' target='_blank' title='Instagram'>
<svg viewBox='0 0 24 24'><path d='M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z'/></svg>
</a>
<a class='codepen' href='https://codepen.io/kurniawanz' rel='nofollow noopener' target='_blank' title='Codepen'>
<svg viewBox='0 0 24 24'><path d='M15.09,12L12,14.08V14.09L8.91,12L12,9.92V9.92L15.09,12M12,2C11.84,2 11.68,2.06 11.53,2.15L2.5,8.11C2.27,8.22 2.09,8.43 2,8.67V14.92C2,15.33 2,15.33 2.15,15.53L11.53,21.86C11.67,21.96 11.84,22 12,22C12.16,22 12.33,21.95 12.47,21.85L21.85,15.5C22,15.33 22,15.33 22,14.92V8.67C21.91,8.42 21.73,8.22 21.5,8.1L12.47,2.15C12.32,2.05 12.16,2 12,2M16.58,13L19.59,15.04L12.83,19.6V15.53L16.58,13M19.69,8.9L16.58,11L12.83,8.47V4.38L19.69,8.9M20.33,10.47V13.53L18.07,12L20.33,10.47M7.42,13L11.17,15.54V19.6L4.41,15.04L7.42,13M4.31,8.9L11.17,4.39V8.5L7.42,11L4.31,8.9M3.67,10.5L5.93,12L3.67,13.54V10.5Z'/></svg>
</a>
<a href='https://twitter.com/WansTm' rel='nofollow noopener' target='_blank' title='Twitter'>
<svg viewBox='0 0 24 24'><path d='M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33Z'/></svg>
</a>
</span>
<span class='credit'>
Copyright &#169; 2019 - 2020
</span>
<span class='developer'>
Desain by
<cite>
<b>
Kurniawan
</b>
</cite>
</span>
</li>
</ul>
</nav>
<div id='head-mobile'></div>
<div class='button' id='menu-button'>
<a arial-label='Menu' class='menu-toggle' href='javascript:;'>
<svg class='kotak9' viewBox='0 0 24 24'><path d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z'></path></svg></a></div>
<nav id='cssmenu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<ul>
<li><a href='#'>Adsense</a></li>
<li><a href='#'>Android</a></li>
<li><a href='#'>Komputer</a></li>
<li><a href='#'>Blogger</a></li>
</ul>
</nav>
5. Agar menu navigasinya berjalan  dengan baik, silahkan tambahkan kode di bawah ini dan letakan di atas kode </body>

<script type='text/javascript'>//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('b'+e(c)+'b','g'),k[c]);return p}('w f=["ilhj","qissnhFngoo","CjgturkgllhkGLvmgkAoDgmir","HnxHA","vBhjyuqissnh","khBithFngoo","CjgturkgllhkGvmgkAoDgmir","vmgkAoDgmir","hn","Bynqxlnh","vjgtuoyIBhjy","Mxjm","mkilmirj","ij","lkiqiqJlh","mgqg","jhNq","onxmhOissnh","lgkhjq","onxmhPl","jiq","vjgtuoyI","Cjgturkgllhk","khgmJ"];$(Q)[f[R]](z(){$(f[4])[f[3]](z(){$(f[2])[f[1]](f[0])});$(f[7])[f[3]](z(){$(f[6])[f[5]](f[0])});w d=z(a,b){p[f[8]]=a||{};p[f[9]]=b||K;w c=p[f[8]][f[11]](f[10]);c[f[13]](f[3],{S:p[f[8]],T:p[f[9]]},p[f[12]])};d[f[14]][f[12]]=z(a){w b=a[f[15]][f[8]];$p=$(p),$E=$p[f[16]]();$E[f[17]]();$p[f[18]]()[f[1]](f[0]);U(!a[f[15]][f[9]]){b[f[11]](f[V])[f[W]]($E)[f[X]]()[f[18]]()[f[5]](f[0])}};w e=Y d($(f[Z]),K)})',62,71,'|||||||||||||||_0x8991|x61|x65|x6F|x6E|x72|x70|x64|x6C|x73|this|x74|x77|x67|x76|x2D|x2E|var|x69|x75|function|x6B|x6D|x23|x68|next|x43|x2C|x63|x62|x79|false|x20|x66|x78|x54|x55|document|23|el|multiple|if|21|20|19|new|22|||||||||'.split('|'),0,{}))
//]]></script>
6. Selanjutnya cari dan hapus kode  .mline1, .mline2, .mline3 { sampai #cssmenu > ul > li.has-sub , lalu ganti dengan kode di bawah ini

.mline1,.mline2,.mline3{
position:absolute;
left:0;
display:block;
height:2px;
width:18px;
background:#fff;
content:'';
transition:all 0.2s
}
.mline1{top:2px}
.mline2{top:7px}
.mline3{top:12px}

.button.menu-opened .mline1{
background:#fff;
top:3px;
border:0;
width:13px;
-webkit-transform:rotate(-45deg);-o-transform:rotate(45deg);-o-transform:rotate(-45deg);-o-transform:rotate(45deg);transform:rotate(-45deg)
}
.button.menu-opened .mline2{
top:7px;
left:2px;
width:19px;
background:#fff
}
.button.menu-opened .mline3{
top:11px;
height:2px;
width:13px;
transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg)
}
#cssmenu .submenu-button{
position:absolute;
z-index:99;
right:0;
top:0;
cursor:pointer
}
#cssmenu ul ul .submenu-button::after{
line-height:36px
}
#cssmenu ul ul ul li.active a{
border-left:none
}
#cssmenu>ul>li.has-sub>ul>li.active>a,#cssmenu>ul ul>li.has-sub>ul>li.active>a{border-top:none
}
}
7. Terakhir simpan tema dan cek hasilnya

tips — Jika anda ingin mengganti icon SVG pada menu navigasinya, silahkan kunjungi materialdesignicon.

Nah itulah pembahasa tutorial kali ini mengenai Cara membuat Menu Navigasi Seperti Igniel di Viomagz. jika ada pertanyaan dan kendala, silahkan tanyakan di kolom komentar. semoga berhasil dan semoga bermanfaat
7 komentar

7 komentar

  • Lokerupdate
    Lokerupdate
    September 07, 2023
    Untuk viomagz versi 5.0.0 bagaimana cara nyain?
    Reply
  • Muhammad Falihudin Az
    Muhammad Falihudin Az
    Juni 07, 2023
    Mohon maaf mau tanya, untuk menu navigasi seperti igniel, bagaimana cara nya supaya tetap muncul di versi desktop, jadi bisa muncul di versi mobile dan versi desktop... seperti navigasi di blog ini..
    Reply
  • Sasaa
    Sasaa
    Februari 28, 2023
    hancur menu saya, saya pkai templete viomag tp masalnya keknya ngasih tau penghapuasan kode .mline1,.mline2,.mline3{
    • Sasaa
      Kurniawan
      Maret 02, 2023
      pake template viomagz versi berapa ?
    Reply
  • DELTA BAZ
    DELTA BAZ
    April 29, 2022
    cara buat author box profil di viomagz dong gan yg di kanan itu
    Reply
  • Anonim
    Anonim
    Juni 14, 2020
    Update lagi dong bang, untuk sub menunya icon svg nya itu kok agak ke atas ya gk kaya punyamu
    • Anonim
      Kurniawan
      Juni 16, 2020
      kalo boleh tau pake template apa gan, kalo itu tinggal atur saja jarak atasnya atau bagian topnya.
    Reply