×

Author / Admin / Editor

     Jagoan Redesign    

Blog yang membahas Tutorial Blogger, Games, Template, Tips Adsense, SEO, Web Design dan Teknologi

Iklan Bawah Posting

Cara Membuat Navigasi Menu Seperti blog Igniel di Blogger

Jagoanredesign - Kali ini saya akan membagikan sebuah tutorial Cara Membuat Navigasi Menu Seperti blog Igniel di Blogger, navigasi merupakan menu yang biasanya wajib ada di blog atau website. Tujuannya adalah untuk mempermudah pengunjung blog anda untuk  untuk menjelajahi blog dengan mudah dalam menemukan kategori atau halaman lainnya.

Cara Membuat Navigasi Menu Seperti blog Igniel di Blogger

Tampilan navigasi setiap blog bisanya berbeda-beda. Apalagi yang sekarang sedang banyak digunakan adalah tampilan milik blog Igniel karena desainnya yang sangat keren dan menarik. banyak dari anda yang tertarik untuk memasang menu navigasi tersebut.

Cara Membuat Navigasi Menu Seperti blog Igniel di Blogger

1. Silahkan Login ke Blogger.
2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.
3. Kemudian cari kode berikut ini ]]></b:skin>  atau </style>dan pastekan kode css dibawah ini tepat DIATAS kode tersebut.

/* Navigasi By Jagoan Redesign*/
.darkshadow{visibility:hidden;opacity:0;position:fixed;top:0;background:rgba(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:0;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:#e1f5fe;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:#333333;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: #000;}#nav-wrapper a:hover{color:#00B8FF;}#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:24px;width:24px;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}
.tekn1{width:22px;height:22px;vertical-align:middle;margin-right:4px}@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:5px 10px;margin-top:0;background-color:#28afdc;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}}@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:#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: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}}.teknbtn{fill:#fff;margin-top:-4px;display:none}@media screen and (max-width:800px){.teknbtn{fill:#fff;margin-top:-4px;display:block}}

4. Kemudian anda cari Kode HTML seperti dibawah ini lalu hapus.


<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>

5. Selanjutnya anda ganti dengan kode dibawah.


<!-- Jagoan Redesign Nav Mobile -->
<div class='darkshadow'/>
<nav class=';' id='nav-wrapper' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<ul>
<li class='first'><a expr:href='data:blog.homepageUrl'><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='Navigasi Jagoan Redesign'>
<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' fill='#000'/>
</svg>Menu<span class='new'>Hot</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 class='subs'>
<a href='#' 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='fb' href='#' 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='#' 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='#' 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 class='ccontact' href='#' rel='nofollow noopener' target='_blank' title='Contact'>
<svg 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>
</a>
</span>
<span class='credit'>Copyright &#169; 2018 - 2020</span>
<span class='developer'>Theme by <cite>
<b>Nama Anda</b>
</cite>
</span>
</li>
</ul>
</nav>
<!-- Jagoan Redesign Nav Mobile End -->
<!-- Jagoan Redesign Button -->
<div id='head-mobile'/>
<div class='button' id='menu-button'>
<a arial-label='Menu' class='menu-toggle' href='javascript:;'>
<svg class='teknbtn' viewBox='0 0 24 24'>
<path d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z'/>
</svg>
<span class='mline1'/>
<span class='mline2'/>
<span class='mline3'/>
</a>
</div>
<!-- Jagoan Redesign Button End -->
<nav id='cssmenu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<!-- Jagoan Redesign Nav Dekstop -->
<ul><li><a href='#'>
<svg style='width:24px;height:24px;margin-right:2px;vertical-align:middle;' viewBox='0 0 24 24'><path d='M21,16V14L13,9V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V9L2,14V16L10,13.5V19L8,20.5V22L11.5,21L15,22V20.5L13,19V13.5L21,16Z' fill='#FFF'/>
</svg> Menu </a></li>

<li><a href='#'>
<svg style='width:24px;height:24px;margin-right:2px;vertical-align:middle;' viewBox='0 0 24 24'><path d='M21,16V14L13,9V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V9L2,14V16L10,13.5V19L8,20.5V22L11.5,21L15,22V20.5L13,19V13.5L21,16Z' fill='#FFF'/>
</svg> Menu</a></li>

<li><a href='#'>
<svg style='width:24px;height:24px;margin-right:2px;vertical-align:middle;' viewBox='0 0 24 24'><path d='M21,16V14L13,9V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V9L2,14V16L10,13.5V19L8,20.5V22L11.5,21L15,22V20.5L13,19V13.5L21,16Z' fill='#FFF'/></svg> Menu</a></li>

<li><a href='#'>
<svg style='width:24px;height:24px;margin-right:2px;vertical-align:middle;' viewBox='0 0 24 24'><path d='M21,16V14L13,9V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V9L2,14V16L10,13.5V19L8,20.5V22L11.5,21L15,22V20.5L13,19V13.5L21,16Z' fill='#FFF'/></svg> Menu</a></li>

<li><a href='#'>
<svg style='width:24px;height:24px;margin-right:2px;vertical-align:middle;' viewBox='0 0 24 24'><path d='M21,16V14L13,9V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V9L2,14V16L10,13.5V19L8,20.5V22L11.5,21L15,22V20.5L13,19V13.5L21,16Z' fill='#FFF'/></svg> Menu</a></li>
</ul>
<!-- Jagoan Redesign Nav Dekstop end -->
</nav>

6. Silahkan anda cari kode seperti 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;
}

7. Selanjutnya anda ganti kode CSS DIATAS dengan kode 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. Silahkan anda tambahkan kode Javascript dibawah ini tepat diatas kode </body>.

<script>
//<![CDATA[
var _0x8991=["\x6F\x70\x65\x6E","\x74\x6F\x67\x67\x6C\x65\x43\x6C\x61\x73\x73","\x23\x6E\x61\x76\x2D\x77\x72\x61\x70\x70\x65\x72\x2C\x20\x2E\x64\x61\x72\x6B\x73\x68\x61\x64\x6F\x77","\x63\x6C\x69\x63\x6B","\x2E\x6D\x65\x6E\x75\x2D\x74\x6F\x67\x67\x6C\x65","\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73","\x23\x6E\x61\x76\x2D\x77\x72\x61\x70\x70\x65\x72\x2C\x2E\x64\x61\x72\x6B\x73\x68\x61\x64\x6F\x77","\x2E\x64\x61\x72\x6B\x73\x68\x61\x64\x6F\x77","\x65\x6C","\x6D\x75\x6C\x74\x69\x70\x6C\x65","\x2E\x6E\x61\x76\x2D\x73\x75\x62\x6D\x65\x6E\x75","\x66\x69\x6E\x64","\x64\x72\x6F\x70\x64\x6F\x77\x6E","\x6F\x6E","\x70\x72\x6F\x74\x6F\x74\x79\x70\x65","\x64\x61\x74\x61","\x6E\x65\x78\x74","\x73\x6C\x69\x64\x65\x54\x6F\x67\x67\x6C\x65","\x70\x61\x72\x65\x6E\x74","\x73\x6C\x69\x64\x65\x55\x70","\x6E\x6F\x74","\x2E\x6E\x61\x76\x2D\x73\x75\x62","\x23\x6E\x61\x76\x2D\x77\x72\x61\x70\x70\x65\x72","\x72\x65\x61\x64\x79"];$(document)[_0x8991[23]](function(){$(_0x8991[4])[_0x8991[3]](function(){$(_0x8991[2])[_0x8991[1]](_0x8991[0])});$(_0x8991[7])[_0x8991[3]](function(){$(_0x8991[6])[_0x8991[5]](_0x8991[0])});var d=function(a,b){this[_0x8991[8]]=a||{};this[_0x8991[9]]=b||false;var c=this[_0x8991[8]][_0x8991[11]](_0x8991[10]);c[_0x8991[13]](_0x8991[3],{el:this[_0x8991[8]],multiple:this[_0x8991[9]]},this[_0x8991[12]])};d[_0x8991[14]][_0x8991[12]]=function(a){var b=a[_0x8991[15]][_0x8991[8]];$this=$(this),$next=$this[_0x8991[16]]();$next[_0x8991[17]]();$this[_0x8991[18]]()[_0x8991[1]](_0x8991[0]);if(!a[_0x8991[15]][_0x8991[9]]){b[_0x8991[11]](_0x8991[21])[_0x8991[20]]($next)[_0x8991[19]]()[_0x8991[18]]()[_0x8991[5]](_0x8991[0])}};var e=new d($(_0x8991[22]),false)})
//]]>
</script>
9. Selanjutnya anda SIMPAN TEMA dan Selesai.

Nah, itu adalah tutorial Cara Membuat Navigasi Menu Seperti blog Igniel di Blogger semoga totorial bermanfaat bagi anda semua. jika ada yang ingin  anda tanyakan silakan berkomentar saja di bawah.
Previous
Next Post »
avatar
Penulis Blog dan redesigner template blogger.

Related Posts

Komentar
Tutup Komentar

1 Komentar

  • Berkomentarlah secara bijaksana dan bertanggung jawab.
  • Tidak diperbolehkan mempromosikan barang atau berjualan.
  • Tulis komentar Anda untuk hal yang masih berhubungan dengan posting pada halaman ini.
  • Dilarang memuat Link Aktif pada kolom komentar
  • Komentar dengan link aktif akan otomatis dihapus.
  • Jika ingin menulis kode silahkan anda 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>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel