Cara Membuat Navigasi Responsive Di blooger

Menu navigasi blog merupakan alat bantu untuk mencari artikel pada blog, berisi daftar nama dari artikel-artikel yang dikelompokan berdasarkan kategori atau label tertentu. Menu navigasi ini dibuat dengan tujuan untuk memudahkan para pengunjung blog didalam menemukan artikel yang mereka cari.

• Template > Edit HTML
• Copas KODE CSS berikut ini di atas kode ]]></b:skin>

nav {display: block;margin: 0 auto;background: #374147;border-bottom: 4px solid #ddd;margin-bottom: 15px;}
.menu{display:block;background:#374147;margin:0 auto;width:100%;max-width:940px}
.menu li{display:inline-block;position:relative;z-index:100;margin:0}
.menu li:first-child{margin-left:0}
.menu li a{font-weight:600;text-decoration:none;padding:12px;display:block;color:#fff;transition:all .2s ease-in-out 0}
.menu li a:hover,.menu li:hover>a{color:#fff;background:#F70000}
.menu ul{visibility:hidden;opacity:0;margin:0;padding:0;width:150px;position:absolute;left:0;background:#fff;z-index:99;transform:translate(0,20px);transition:all .2s ease-out}
.menu ul:after{bottom:100%;left:20%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(255,255,255,0);border-bottom-color:#fff;border-width:6px;margin-left:-6px}
.menu ul li{display:block;float:none;background:none;margin:0;padding:0}
.menu ul li a{font-size:12px;font-weight:400;display:block;color:#797979;background:#fff}
.menu ul li a:hover,.menu ul li:hover>a{background:#F70000;color:#fff}
.menu li:hover>ul{visibility:visible;opacity:1;transform:translate(0,0)}
.menu ul ul{left:149px;top:0;visibility:hidden;opacity:0;transform:translate(20px,20px);transition:all .2s ease-out}
.menu ul ul:after{left:-6px;top:10%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(255,255,255,0);border-right-color:#fff;border-width:6px;margin-top:-6px}
.menu li>ul ul:hover{visibility:visible;opacity:1;transform:translate(0,0)}
.responsive-menu{display:none;width:100%;padding:20px 15px;background:#374147;color:#fff;text-transform:uppercase;font-weight:600}
.responsive-menu:hover{background:#374147;color:#fff;text-decoration:none}
a.homer{background:#F70000}
@media (min-width: 768px) and (max-width: 979px) {
.mainWrap{width:768px}
.menu ul{top:37px}
.menu li a{font-size:12px}
a.homer{background:#374147}
}
@media (max-width: 767px) {
.mainWrap{width:auto;padding:50px 20px}
.menu{display:none}
.responsive-menu{display:block}
nav{margin:0;background:none}
.menu li{display:block;margin:0}
.menu li a{background:#fff;color:#797979}
.menu li a:hover,.menu li:hover>a{background:#F70000;color:#fff}
.menu ul{visibility:hidden;opacity:0;top:0;left:0;width:100%;transform:initial}
.menu li:hover>ul{visibility:visible;opacity:1;position:relative;transform:initial}
.menu ul ul{left:0;transform:initial}
.menu li>ul ul:hover{transform:initial}
}

•  Copas kode HTML Main Menu Responsive untuk Blogger ini di bawah kode header blog Anda:

<nav>
<a class='responsive-menu' href='#' id='resp-menu' style='color:#fafafc'><i class='fa fa-reorder'/> Menu</a>   
   <ul class='menu'>
<li><a class='homer' href='/'><i class='fa fa-home'/> HOME</a></li>
<li><a href='/search/label/News'>NEWS</a></li>
<li><a href='#'>SPORTS</a></li>
<li><a href='#'>MEDIA</a></li>
<li><a href='#'>LifeStyle</a></li>
     <li><a href='#'>DROPMENU <i class='fa fa-arrow-down'/></a>
  <ul class='sub-menu'>
<li><a href='#'>Sub-Menu 1</a></li>
<li><a href='#'>Sub-Menu 2</a>
    <ul>
<li><a href='#'>Sub Sub-Menu 1</a></li>
<li><a href='#'>Sub Sub-Menu 2</a></li>
<li><a href='#'>Sub Sub-Menu 3</a></li>
<li><a href='#'>Sub Sub-Menu 4</a></li>
<li><a href='#'>Sub Sub-Menu 5</a></li>
</ul>
</li>
<li><a href='#'>Sub-Menu 3</a>
    <ul>
<li><a href='#'>Sub Sub-Menu 1</a></li>
<li><a href='#'>Sub Sub-Menu 2</a></li>
<li><a href='#'>Sub Sub-Menu 3</a></li>
<li><a href='#'>Sub Sub-Menu 4</a></li>
<li><a href='#'>Sub Sub-Menu 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>BLOG</a></li>
    <li><a href='#'>CATEGORIES <i class='fa fa-arrow-down'/></a>
  <ul class='sub-menu'>
<li><a href='#'>Sub-Menu 1</a></li>
<li><a href='#'>Sub-Menu 2</a>
    <ul>
<li><a href='#'>Sub Sub-Menu 1</a></li>
<li><a href='#'>Sub Sub-Menu 2</a></li>
<li><a href='#'>Sub Sub-Menu 3</a></li>
<li><a href='#'>Sub Sub-Menu 4</a></li>
<li><a href='#'>Sub Sub-Menu 5</a></li>
</ul>
</li>
<li><a href='#'>Sub-Menu 3</a>
    <ul>
<li><a href='#'>Sub Sub-Menu 1</a></li>
<li><a href='#'>Sub Sub-Menu 2</a></li>
<li><a href='#'>Sub Sub-Menu 3</a></li>
<li><a href='#'>Sub Sub-Menu 4</a></li>
<li><a href='#'>Sub Sub-Menu 5</a></li>
</ul>
</li>
</ul>
</li>
    </ul>
</nav>

• Pasang kode JavaScript Top Menu Responsive berikut ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 var touch  = $('#resp-menu');
 var menu  = $('.menu');
 $(touch).on('click', function(e) {
  e.preventDefault();
  menu.slideToggle();
 });
 $(window).resize(function(){
  var w = $(window).width();
  if(w > 767 && menu.is(':hidden')) {
   menu.removeAttr('style');
  }
 });
});
//]]>
</script>

• Terakhir, juga untuk melengkapi pasang Top Menu di atas, pasang link ke Font Awesome berikut ini di atas kode </head> karena top menu dan main menu di atas menggunakan kodenya:

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

• Save Template

Semoga Bermanfaat