Cara Membuat Navigasi Menu Responsive di Blog

Terdapat banyak gaya pada menu di blog, tetapi kebanyakan para blogger yang mendesain menu hanya melihatnya melalui pc tanpa dia sadar menu tersebut terlihat berantakan apabila dibuka pada handphone/mobile. Disini saya akan memberikan tutorial Cara Membuat Navigasi Menu Responsive di Blog. Menu ini sudah didesain untuk tampilan pada pc maupun mobile, dan sudah terdapat fitur menu dropdown (sub-menu).

Cara Membuat Navigasi Menu Responsive di Blog:

Masuk ke blogger.com -> Template -> Edit HTML

Tambahkan kode dibawah ini diatas kode ]]></b:skin>

.nav-dans{display:block;background:#333;margin:0 auto}
.nav-dans ul{list-style-type:none;margin:0 auto;padding:0;display:block;max-width:1024px}
.nav-dans li{float:none;list-style-type:none;margin:0;padding:0;display:inline-block;position:relative;font-size:14px;color:#def1f0}
.nav-dans li a{padding:15px;font-size:15px;color:#fff;display:inline-block;outline:0;font-weight:600}
.nav-dans li:hover ul.dropdown{display:block}
.nav-dans 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}
.nav-dans li ul.dropdown li{display:block;list-style-type:none;float:none}
.nav-dans li ul.dropdown li a{padding:15px 20px;font-size:15px;color:#fff;display:block}
.nav-dans li ul.dropdown li:last-child a{border-bottom:none}
.nav-dans li:hover a{background:#3cc091;color:#fff!important}
.nav-dans li.active a{background:#3cc091;color:#fff}
.nav-dans li.active span{border-top:5px solid #fff}
.nav-dans li:first-child:hover a{color:#fff}
.nav-dans li ul.dropdown li:hover a{background:rgba(60,192,145,0.6)}
.nav-dans li ul.dropdown li:first-child:hover a{border-radius:0}
.nav-dans 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){
  .nav-dans{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}
  .nav-dans.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-bg-dans{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-dans{display:inline-block;vertical-align:middle;height:31px;cursor:pointer;margin:0;position:fixed;top:0;left:0;padding:12px;z-index:99}
  .navbar-dans span{height:2px;background:#444;margin:5px;display:block;width:20px}
  .navbar-dans span:nth-child(2){width:20px}
  .navbar-dans span:nth-child(3){width:20px}
  .nav-dans ul{padding-top:55px}
  .nav-dans li{display:block;float:none}
  .nav-dans li a{display:block;color:#505050;font-weight:600}
  .nav-dans li:first-child:hover a{border-radius:0}
  .nav-dans li ul.dropdown{position:relative}
  .nav-dans li ul.dropdown li a{background:#358c6d!important;border-bottom:none;color:#fff!important}
  .nav-dans li:hover a{background:#3cc091;color:#fff!important}
  .nav-dans li ul.dropdown li:hover a{background:rgba(0,0,0,.1);color:#fff!important}
  .nav-dans li ul.dropdown li a{padding:10px 10px 10px 30px}
  .nav-dans 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}
}

Kemudian cari kode

<header id='header-wrapper'>...</header>

atau seperti ini

<div id='header-wrapper'>...</div>

Letakan kode dibawah ini dibawah nya kode penutup header, </header> atau </div>
(Ini merupakan penempatan menu dibawah Header)

<nav>
<div class='nav-dans'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='javascript:void(0)'>Web Design<span class='arrow-down'/></a>
<ul class='dropdown'>
<li><a href='#'>HTML</a></li>
<li><a href='#'>CSS</a></li>
<li><a href='#'>Widget</a></li>
</ul>
</li>
<li><a href='#'>Tutorial Blogger</a></li>
<li><a href='#'>Template</a></li>
<li><a href='#'>SEO</a></li>
</ul>
</div>
<div class='nav-bg-dans'>
<div class='navbar-dans'> <span/> <span/> <span/> </div>
<a class='title-mobile' expr:href='data:blog.homepageUrl'><data:blog.title/></a>
</div>
</nav>

Ganti tanda pagar (#) dengan URL kategori tujuan sobat.
Lalu cari kode </body>, letakan kode dibawah ini diatas kode </body>

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

Jangan lupa untuk memasang jquery lib diatas kode </head>

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

Jika kode jquery lib diatas sudah dipasang di blog sobat, maka tidak perlu untuk memasangnya lagi.
Simpan template dan lihat hasilnya. Jika masih ada yang kurang jelas, silahkan bertanya melalui komentar.