Cara Membuat Menu Navigasi Blog Seperti Igniel

BangEvtan - Hallo sahabat blogger, kembali lagi dengan Saya Admin BangEvtan. Didalam suatu Blog, Menu Navigasi sangat bermanfaat keberadaannya karena dapat membantu Pembaca untuk menjelajahi Blog tersebut. Selain itu Pembaca dan Mengetahui Topik atau Isi dari Blog tersebut, serta dapat mempermudah Pembaca untuk mencari suatu label atau judul yang ada didalam blog tersebut.

Tapi Pernah gak sihh Sobat Melihat Template Blog yang Menu Navigasinya Mirip Template Igniel?, Pasti Sobat Pernah Melihatnya. Contohnya seperti Menu Navigasi di Blog Ini. Karena desainnya yang sangat keren dan menarik. Banya blogger yang tertarik untuk memasang menu navigasi tersebut.

Pada kesempatan kali ini saya akan membahas tentang Cara Membuat Menu Navigasi Seperti Igniel. Sobat bisa melihatnya di versi Mobile saja ya. Sobat simak caranya berikut ini.

Cara Membuat Menu Navigasi Seperti Igniel

1. Masuk ke Dasboard Blogger Sobat.
2. Klik Menu Tema => Edit HTML.
3. Cari Kode CSS ]]></b:skin> copy kode CSS dibawah ini kemudian paste tepat diatasnya.

/* NAVIGASI BAR-BAR Igniel */
.darkshadow{visibility:hidden;opacity:0;position:fixed;top:48px;background:rgba(0,0,0,0.59);left:0;right:0;bottom:0;margin:0;z-index:5;transition:all .4s ease-in-out}.darkshadow.open{visibility:visible;opacity:1}
#nav-wrapper{
font-size:13px;
width:265px;
position:fixed;
z-index:5;
top:48px;
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.close{display:none}
#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;display: none;}
#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:12px 0 13px 15px;color:#333333;font-size:13px}#nav-wrapper li a.nav-submenu{padding:10px 15px;padding-bottom:12px;}#nav-wrapper li ul.nav-sub{display:none}#nav-wrapper li li a{display:block;position:relative;padding-left:4em;line-height:40px;color: #657786;}#nav-wrapper a:hover{color:#008080;}#nav-wrapper svg.down{margin-right:0;margin-left:15px;display:block;-webkit-transition:all 0.4s ease;-o-transition:all 0.4s ease;transition:all 0.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:20px;width:20px;margin-right:15px;overflow:hidden;opacity:.7;fill:currentColor}#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:#e1f5fe;color:#004c88;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: #a1362a;
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: none;
}
#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: 15px;
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: #a1362a;
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: none;
}
#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: 15px;
}
#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;
}
}

5. Cari Kode HTML dibawah dibawah ini.

<nav id='cssmenu'>
<div id='head-mobile'/>
<div class='button' id='menu-button'>
<span class='mline1'/>
<span class='mline2'/>
<span class='mline3'/>
</div>
  
<!-- menu navigasi header start -->
<ul>
  <li><a href='#'>Menu 1</a></li>
  <li><a href='#'>Menu 2</a></li>
  <li><a href='#'>Menu 3</a>
  <ul>
 <li><a href='#'>SubMenu 1</a></li>
 <li><a href='#'>SubMenu 2</a></li>
  </ul>
  </li>
</ul>
<!-- menu navigasi header end -->

</nav>

Kemudian Sobat Ganti dengan kode HTML
dibawah ini.

<div class='darkshadow'/>
<nav id='nav-wrapper' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<ul>
<li class='first'><a href='https://demogridv3.blogspot.com/'><span itemprop='name'><svg height='24' viewBox='0 0 24 24' width='24'>
<path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z'/>
</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='#' itemprop='url'><span itemprop='name'>Dropdown Menu</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Dropdown Menu</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Dropdown Menu</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Dropdown Menu</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Dropdown Menu</span></a></li>
</ul>
</li>
<li><a href='#' 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='#' itemprop='url'><span itemprop='name'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
    <path d='M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z'/>
</svg>Kontak</span></a></li>
<li><a href='#' 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-blog.g?blogID=8775495764235211372' 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>
</li>
<li class='footer'>
<a href='#' itemprop='url' title='Sitemap'><span itemprop='name'>Sitemap</span></a> - <a href='#' itemprop='url' title='Disclaimer'><span itemprop='name'>Disclaimer</span></a> - <a href='#' itemprop='url' title='Privacy Policy'><span itemprop='name'>Privacy</span></a>
<span class='social'>
<a class='facebook2' href='https://www.facebook.com/ishar.juliansatriani' 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/alex_toolkit/' 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/AnakGanteng' 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>
</span>
<span class='credit'>Copyright &#169; 2020</span>
<span class='developer'>Theme by <cite><b><data:blog.title/></b></cite></span>
</li>
</ul>
</nav>
<div id='head-mobile'/>
<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='M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z'/></svg>
<span class='mline1'/>
<span class='mline2'/>
<span class='mline3'/></a></div>
<nav id='cssmenu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>

<!-- menu navigasi header start -->
<ul>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu</a></li>
</ul>
<!-- menu navigasi header end -->
</nav>

6. Cari Kode HTML </body>, copy kode javascript dibawah ini kemudian pastekan tepat atasnya.

<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=["\i\l\h\j","\q\i\s\s\n\h\F\n\g\o\o","\C\j\g\t\u\r\k\g\l\l\h\k\G\L\v\m\g\k\A\o\D\g\m\i\r","\H\n\x\H\A","\v\B\h\j\y\u\q\i\s\s\n\h","\k\h\B\i\t\h\F\n\g\o\o","\C\j\g\t\u\r\k\g\l\l\h\k\G\v\m\g\k\A\o\D\g\m\i\r","\v\m\g\k\A\o\D\g\m\i\r","\h\n","\B\y\n\q\x\l\n\h","\v\j\g\t\u\o\y\I\B\h\j\y","\M\x\j\m","\m\k\i\l\m\i\r\j","\i\j","\l\k\i\q\i\q\J\l\h","\m\g\q\g","\j\h\N\q","\o\n\x\m\h\O\i\s\s\n\h","\l\g\k\h\j\q","\o\n\x\m\h\P\l","\j\i\q","\v\j\g\t\u\o\y\I","\C\j\g\t\u\r\k\g\l\l\h\k","\k\h\g\m\J"];$(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>

7. Cari kode CSS dibawah ini.

.mline1, .mline2, .mline3 {
  position: absolute;
  left: 0;
  display: block;
  height: 3px;
  width: 22px;
  background: $(search.icon.color);
  content:'';
  border-radius: 5px;
  transition: all 0.2s;
 }
 .mline1 {
  top: 0;
 }
 .mline2 {
  top: 7px;
 }
 .mline3 {
  top: 14px;
 }
 .button.menu-opened .mline1 {
  top: 8px;
  border: 0;
  height: 3px;
  width: 22px;
  background: $(navmenu.font.color);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg)
 }
 .button.menu-opened .mline2 {
  top: 8px;
  background: $(navmenu.font.color);
  width: 22px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg)
 }
 .button.menu-opened .mline3 {
        display: none;
        height:0;
    }

Kemudian Ganti dengan Kode CSS dibawah ini.

.mline1, .mline2, .mline3 {
position: absolute;
left: 0;
display: block;
height: 3px;
width: 22px;
background: $(search.icon.color);
content:'';
border-radius: 5px;
transition: all 0.2s;
display: none;
}
.mline1 {
top: 0;
}
.mline2 {
top: 7px;
}
.mline3 {
top: 14px;
}
.button.menu-opened .mline1 {
top: 8px;
border: 0;
height: 3px;
width: 22px;
background: $(search.icon.color);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.button.menu-opened .mline2 {
top: 8px;
background: $(search.icon.color);
width: 22px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.button.menu-opened .mline3 {
display: none;
height:0;
}

8. Simpan Tema dan Lihat Hasilnya.

Bagaimana? Mudah bukan?. Perlu diingat bahwa Menu Navigasi ini hanya berfungsi di Versi Mobile dan Menu Navigasi ini hanyalah hasil tiruan dari Igniel. Jika ada permasalahan ketika Sobat memasangnya, Sobat bisa berkomentar dibawah. Semoga Bermanfaat, sampai bertemu kembali di artikel selanjutnya.

Share this post