Cara membuat Menu Navigasi Seperti Igniel di Viomagz
Updated:Daftar Isi [Tampilkan]
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&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 © 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

Update lagi dong bang, untuk sub menunya icon svg nya itu kok agak ke atas ya gk kaya punyamu
BalasHapuskalo boleh tau pake template apa gan, kalo itu tinggal atur saja jarak atasnya atau bagian topnya.
Hapuscara buat author box profil di viomagz dong gan yg di kanan itu
BalasHapushancur menu saya, saya pkai templete viomag tp masalnya keknya ngasih tau penghapuasan kode .mline1,.mline2,.mline3{
BalasHapuspake template viomagz versi berapa ?
HapusMohon 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..
BalasHapusUntuk viomagz versi 5.0.0 bagaimana cara nyain?
BalasHapus