Cara Membuat Menu Navigasi&Header Responsive di Blogger

Menu Navigasi adalah merupakan sebuah Tab Menu yang berisi penunjuk arah pada bagian kategori/label dari blog atau situs, dan berisi sebuah link tujuan sesuai dengan nama menu yang tercantum. Menu Navigasi ini sendiri biasanya berada pada bagian Header. Menu Navigasi ini sangat diperlukan diterapkan di blogger anda, karena memudahkan pengunjung dalam surfing semua isi blog anda.

Baca Juga :

Screenshoot :

Cara Membuat Menu Navigasi&Header Responsive

Cara Pertama :

1. Buka Bloger - Kemudian login
2. Dashboard - Template
3. Edit HTML

Proses Pembuatan :

1. Temukan kode ]]></b:skin> atau </style>

2. Copy&paste kode berikut ini, dan letakkan diatas kode ]]></b:skin> atau <style>

/* Menu Navigasion Header */
.menu-navigasion{display:block;background:rgba(60, 192, 145, 0.6) none repeat scroll 0% 0%;margin:0 auto}
.menu-navigasion ul{list-style-type:none;margin:0 auto;padding:0;display:block;max-width:1024px}
.menu-navigasion li{float:none;list-style-type:none;margin:0;padding:0;display:inline-block;position:relative;font-size:14px;color:#def1f0}
.menu-navigasion li a{padding:15px;font-size:15px;color:#fff;display:inline-block;outline:0;font-weight:600}
.menu-navigasion li:hover ul.dropdown{display:block}
.menu-navigasion li ul.dropdown{position:absolute;display:none;width:200px;background:#fff;-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,0.26);-moz-box-shadow:0 2px 5px 0 rgba(0,0,0,0.26);-ms-box-shadow:0 2px 5px 0 rgba(0,0,0,0.26);-o-box-shadow:0 2px 5px 0 rgba(0,0,0,0.26);box-shadow:0 2px 5px 0 rgba(0,0,0,0.26);padding-top:0}
.menu-navigasion li ul.dropdown li{display:block;list-style-type:none;float:none}
.menu-navigasion li ul.dropdown li a{padding:15px 20px;font-size:15px;color:#fff;display:block}
.menu-navigasion li ul.dropdown li:last-child a{border-bottom:none}
.menu-navigasion li:hover a{background:#3cc091;color:#fff!important}
.menu-navigasion li.active a{background:#3cc091;color:#fff}
.menu-navigasion li.active span{border-top:5px solid #fff}
.menu-navigasion li:first-child:hover a{color:#fff}
.menu-navigasion li ul.dropdown li:hover a{background:rgba(60,192,145,0.6)}
.menu-navigasion li ul.dropdown li:first-child:hover a{border-radius:0}
.menu-navigasion li:hover .arrow-down{border-top:5px solid #fff}
.arrow-down{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #fff;position:relative;top:11px;right:-5px;content:''}
.title-mobile{display:none}
.nav-social{float:right!important}
.nav-social li a{padding:10px 3px;font-size:14px}
.nav-social li:hover a{background:none}
.nav-social li:hover a{background:none;color:#777!important}
.nav-social a.fcb:hover{color:#4d70a8!important}
.nav-social a.twt:hover{color:#00bbf2!important}
.nav-social a.gpl:hover{color:#e3401d!important}
.nav-social a.ig:hover{color:#527fa4!important}
.nav-social a.ytb:hover{color:#cb3737!important}
@media only screen and (max-width:700px){
  .menu-navigasion{padding:0;background:#fff;width:200px;height:100%;display:block;position:fixed;left:-200px;top:0;-webkit-transition:left .25s ease;-moz-transition:left .25s ease;-ms-transition:left .25s ease;-o-transition:left .25s ease;transition:left .25s ease;margin:0;border:0;border-radius:0;overflow-y:auto;overflow-x:hidden;height:100%;box-shadow:none;z-index:0}
  .title-mobile{position:fixed;display:block;top:15px;font-size:20px;left:0;right:0;text-align:center;color:#FFF;font-family:Roboto,Arial,Sans-serif;font-weight:700;z-index:1}
  a.title-mobile{color:#444}
  .menu-navigasion.visible{left:0;-webkit-transition:left .25s ease;-moz-transition:left .25s ease;-ms-transition:left .25s ease;-o-transition:left .25s ease;transition:left .25s ease}
  .nav-menu{display:inline-block;vertical-align:middle;width:100%;height:50px;margin:0;position:fixed;top:0;left:0;background:#fff;padding:5px 0 0 10px;z-index:9;box-shadow:0 0 5px rgba(0,0,0,0.5);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);-moz-box-shadow:0 0 5px rgba(0,0,0,0.5)}
  .navbar-navigasion{display:inline-block;vertical-align:middle;height:31px;cursor:pointer;margin:0;position:fixed;top:0;left:0;padding:12px;z-index:99}
  .navbar-navigasion span{height:2px;background:#444;margin:5px;display:block;width:20px}
  .navbar-navigasion span:nth-child(2){width:20px}
  .navbar-navigasion span:nth-child(3){width:20px}
  .menu-navigasion ul{padding-top:55px}
  .menu-navigasion li{display:block;float:none}
  .menu-navigasion li a{display:block;color:#505050;font-weight:600}
  .menu-navigasion li:first-child:hover a{border-radius:0}
  .menu-navigasion li ul.dropdown{position:relative}
  .menu-navigasion li ul.dropdown li a{background:#358c6d!important;border-bottom:none;color:#fff!important}
  .menu-navigasion li:hover a{background:#3cc091;color:#fff!important}
  .menu-navigasion li ul.dropdown li:hover a{background:rgba(0,0,0,.1);color:#fff!important}
  .menu-navigasion li ul.dropdown li a{padding:10px 10px 10px 30px}
  .menu-navigasion li:hover .arrow-down{border-top:5px solid #fff}
  .arrow-down{border-top:5px solid #505050;position:absolute;top:20px;right:10px}
  .cover-bg{background:rgba(0,0,0,0.5);position:fixed;top:0;bottom:0;left:0;right:0}
}

3. Temukan kode <Gunakan CTRL+F untuk memudahkan pencarian> Tenukan kode </body>
4. Copy&paste kode berikut ini, dan letakkan diatas kode </body>

<script type='text/javascript'>
$(document).ready(function(){
  $(&#39;.navbar-navigasion&#39;).click(function(){
   $(&#39;.menu-navigasion&#39;).toggleClass(&#39;visible&#39;);
   $(&#39;body&#39;).toggleClass(&#39;cover-bg&#39;);
  });
 });
</script>

5. Temukan kode <div id='post-wrapper'> . </header> . <div id='content-wrapper'>
6. Copy&paste kode berikut ini, dan letakkan diatas kode <div id='post-wrapper'> . </header> . <div id='content-wrapper'>

<nav>
<div class='menu-navigasion'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><i class='fa fa-home'/> HOME</a></li>
<li><a href='javascript:void(0)'>MENU<span class='arrow-down'/></a>
<ul class='dropdown'>
<li><a href='#'>MENU 1</a></li>
<li><a href='#'>MENU 2</a></li>
<li><a href='#'>MENU 3</a></li>
</ul>
</li>
<li><a href='#'>MENU 1</a></li>
<li><a href='#'>MENU 2</a></li>
<li><a href='#'>MENU 3</a></li>
</ul>
</div>
<div class='nav-menu'>
<div class='navbar-navigasion'> <span/> <span/> <span/> </div>
<a class='title-mobile' expr:href='data:blog.homepageUrl'><data:blog.title/></a>
</div>
</nav>

7. Temukan lagi kode </head>
8. Copy&paste JQuery berikut ini, dan letakkan diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js' type='text/javascript'/>

9. Simpan Template!

Demikianlah Tutorial Blogger kali ini, Jika terjadi kesalahan atau kurang mengerti? Silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat home page anda. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading & Sharing : Cara Membuat Menu Navigasi&Header Responsive

Cara Membuat Menu Navigasi&Header Responsive di Blogger

4 Responses to "Cara Membuat Menu Navigasi&Header Responsive di Blogger"