Cara Membuat Menu Bar Multi Dropdown Di Blogger

Reza Handoyo       Tutorial Blog    Comment   

Cara Membuat Menu Bar Multi Dropdown - Menu bar atau menu dropdown sering sekali kita jumpai pada website setiap kita mengunjungi sebuah blog, dengan adanya menu dropdown ini akan membuat artikel mudah untuk di kategorikan dan menjadi tersusun rapi sesuai label atau kategori.

Nah kalo kamu kebetulan sedang mencari bagaimana cara membuat menu bar dropdown ini mungkin kamu bisa gunakan cara di bawah ini, kode menu dropdown ini buatan mba arlina sob jadi kamu gak usah ragu mencoba kode ini karena saya sudah coba juga dan terbukti sangat responsive.

Nah dari pada nglantur gak jelas mending kita simak saja langsung bagaimana cara membuat menu bar multi dropdown di blogger.

Cara Membuat Menu Bar Multi Dropdown Di Blogger

Cara Membuat Menu Bar Multi Dropdown

1. Oke pertama masuk ke dashboard blog kamu sob.
2. Buka menu template/tema lalu pilih edit.
3. Kamu cari kode berikut ]]></b:skin> atau </style> dengan menekan CTRL + F.
4. Pastekan kode di bawah ini dan letakan di bawah kode di atas.

<nav>
<a id="resp-menu" class="responsive-menu" href="#"><i class="fa fa-reorder"></i> Menu</a>    
   <ul class="menu">
   <li><a class="homer" href="#"><i class="fa fa-home"></i> HOME</a>
   <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a></li>
   <li><a href="#">Sub-Menu 3</a></li>
   <li><a href="#">Sub-Menu 4</a></li>
   <li><a href="#">Sub-Menu 5</a></li>   
   </ul>
   </li>
  <li><a  href="#"><i class="fa fa-user"></i> ABOUT</a></li>
  <li><a  href="#"><i class="fa fa-camera"></i> PORTFOLIO</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="#"><i class="fa fa-bullhorn"></i> BLOG</a></li>
    <li><a  href="#"><i class="fa fa-tags"></i> CATEGORIES</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="#"><i class="fa fa-envelope"></i> CONTACT</a></li>
  <li><a  href="#"><i class="fa fa-sitemap"></i> SITEMAP</a></li>
  <li><a  href="#"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER</a></li>
  </ul>
  </nav> 

5. Nah kemudian kamu letakan kode berikut tepat di bawah kode </header>

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

6. Nah langkah terakhir kamu perlu pastekan kode di bawah 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>

7. Pastikan kamu pratinjau dahulu sebelum menyimpan tema/template barangkali ada kode yang kurang atau tertinggal.


Nah itulah sob mengenai tutorial cara membuat menu bar multi dropdown di blogger, oke sob mungkin segitu aja mengenai cara membuat menu bar multi dropdown di blogger yang mungkin berguna buat kamu.... oke sob bye bye....