Cara Mudah Membuat Menu Dropdown atau Sub Menu Di Blogger Menggunakan Bootstrap

Membuat Menu Dropdown Responsive Di Blog/Blogspot

Sebuah website atau blog pasti memiliki sebuah template. Template dapat diartikan sebagai cetakan atau pola dengan bentuk tertentu. Jika di dalam sebuah web atau blog, template dapat di artikan sebagai cetakan desain tampilan web atau blog dan di gunakan sebagai standar untuk layout sebuah web atau blog secara konsisten.

Di dalam sebuah template web atau blog, biasanya terdapat empat komponen utama di dalam sebuah template tersebut, yaitu header, body, sidebar, dan footer, lihat gambar berikut

Empat komponen utama di dalam sebuah template

Di dalam sebuah header terdapat sebuah menu navigasi atau navigasi bar (navbar). Biasanya di dalam sebuah menu navigasi terdapat beberapa menu yang akan memudahkan pengujung web atau blog tersebut. Salah satu menu-menu tersebut adalah Sub Menu atau biasa di sebut menu dropdown.

Hampir semua web atau blog pasti memiliki setidaknya satu menu dropdown atau sub menu di dalam headernya. Disini saya akan memberikan cara membuat menu dropdown atau sub menu responsive di blogger dengan mudah dan sederhana dengan menggunakan bootstrap.

Baiklah, tanpa basa basi lagi berikut ini adalah caranya :

Cara Membuat Menu Dropdown Di Blog Menggunakan Bootstrap

1.) Pertama kalian copy code dibawah ini dan letakan di atas </body>, kemudian klik "save theme"

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'/>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script crossorigin='anonymous' integrity='sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS' src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'/>

Copy code tersebut, kemudian paste di atas code </body>

2.) Setelah itu copy code di bawah ini, dan kemudian paste di bawah <head>, kemudian klik "save theme"

<meta charset='utf-8'/>
<meta content='IE=edge' http-equiv='X-UA-Compatible'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

<!-- Bootstrap -->
<link crossorigin='anonymous' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' integrity='sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7' rel='stylesheet'/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]-->
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<!--[endif]-->

Copy code tersebut, kemudian paste di bawah code <head>

3.) Kemudian kalian ke sini, kemudian copy code tersebut di dalam <b:skin><![CDATA[Taruh di dalam sini]]></b:skin>
*note untuk langkah ini kalian dapat lewati atau tidak usah di copy juga tidak apa-apa

4.) Terakhir kalian tinggal copy code berikut di dalam code <body>, kemudian kalian tinggal "save theme"

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Copy code tersebut, kemudian paste di bawah code </body>

Bagaimana, Mudah bukan ?, sekian tutorial cara membuat menu dropdown responsive menggunakan bootstrap di blog. Jika kalian masih bingung silahkan tanya di kolom komentar. Terima kasih telah berkunjung.