Cara membuat Menu Navigasi Seperti Igniel di Viomagz

By Kurniawan Updated: 2020-09-17T14:50:16Z 7 ·

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

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

Tags Blogger

SHARE Facebook Whatsapp

Tutup Komentar

7 Komentar

AnonimJuni 14, 2020
Update lagi dong bang, untuk sub menunya icon svg nya itu kok agak ke atas ya gk kaya punyamu
BalasHapus
Balasan
DELTA BAZApril 29, 2022
cara buat author box profil di viomagz dong gan yg di kanan itu
BalasHapus
Balasan
SasaaFebruari 28, 2023
hancur menu saya, saya pkai templete viomag tp masalnya keknya ngasih tau penghapuasan kode .mline1,.mline2,.mline3{
BalasHapus
Balasan
Alfi Kafana MumtazaJuni 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..
BalasHapus
Balasan
LokerupdateSeptember 07, 2023
Untuk viomagz versi 5.0.0 bagaimana cara nyain?
BalasHapus
Balasan

Tambahkan komentar

Balasan

Mohon Tinggalkan jejak sesuai dengan judul artikel.
Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
Dilarang mencantumkan link aktif di komentar.
Komentar dengan link aktif akan otomatis dihapus
Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.
Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
```
<i>#comments</i>
```
Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
```
<em>#comments {margin:0; padding:10px 15px}</em>
```

Cara membuat Menu Navigasi Seperti Igniel di Viomagz

Cara membuat Menu Navigasi Seperti Igniel di Viomagz

Related Posts

7 Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel