NgeShare - Pasang Navbar Bootstrap di Blog ~ Blog Surya Adhi

Pada kesempatan ini, saya akan membagikan tutorial mengenai cara memasang menu navigasi/ navbar Bootstrap di blog. Navbar Bootstrap ini memiliki tampilan yang simpel/ sederhana dan pastinya responsive atau mobile friendly.

Oke, tanpa perlu panjang lebar lagi, mari simak tutorial berikut ini.

Perhatian: Ketika kamu memasang kode menu navigasi ini, mungkin akan mempengaruhi beberapa tampilan di template blogmu, seperti misalnya berubahnya jenis font, ukuran font, dan lainnya. Hal ini dapat terjadi dikarenakan kode dalam menu navigasi ini memiliki kesamaan pada penamaan tag, class, atau id. Untuk itu, alangkah baiknya, sebelum mencoba tutorial ini, backup/ cadangkan terlebih dahulu template blogmu.

1. Pasang kode CSS dari BootstrapCDN (v4.1.3.) di bawah ini, dan letakkan di templatemu sebelum atau di atas kode </head>.

<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' integrity='sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO' crossorigin='anonymous' rel='stylesheet'/>

2. Pasang kode jQuery, Popper.js, dan js dari BootstrapCDN (v4.1.3.) di bawah ini, dan letakkan di templatemu sebelum atau di atas kode </head> atau di bawah kode CCS pada langkah nomor 1.

<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js' integrity='sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo' crossorigin='anonymous'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js' integrity='sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49' crossorigin='anonymous'/>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js' integrity='sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy' crossorigin='anonymous'/>

3. Pasang kode HTML di bawah ini, dan letakkan di antara kode <body> ... </body>.

<nav class='navbar navbar-expand-md navbar-light bg-white absolute-top'>
      <div class='container'>
        <button class='navbar-toggler order-2 order-md-1' type='button' data-toggle='collapse' data-target='#navbar' aria-controls='navbar' aria-expanded='false' aria-label='Toggle navigation'>
          <span class='navbar-toggler-icon'></span>
        </button>

        <a class='navbar-brand mx-auto order-1 order-md-1' href='/index.html'><data:blog.title/></a>

        <div class='collapse navbar-collapse order-4 order-md-4' id='navbar'>
          <ul class='navbar-nav ml-auto'>

<li class='nav-item dropdown active'>
              <a class='nav-link dropdown-toggle' href='#' id='dropdown02' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>Category</a>
              <div class='dropdown-menu' aria-labelledby='dropdown02'>
                <a class='dropdown-item' href='#'>Anime</a>
                <a class='dropdown-item' href='#'>Manga</a>
                <a class='dropdown-item' href='#'>Webtoon</a>
              </div>
            </li>
            <li class='nav-item dropdown'>
              <a class='nav-link dropdown-toggle' href='#' id='dropdown02' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>Anime</a>
              <div class='dropdown-menu' aria-labelledby='dropdown02'>
                <a class='dropdown-item' href='#'>Black Clover</a>
                <a class='dropdown-item' href='#'>Naruto</a>
                <a class='dropdown-item' href='#'>One Piece</a>
              </div>
            </li>
            <li class='nav-item dropdown'>
              <a class='nav-link dropdown-toggle' href='#' id='dropdown03' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>Manga</a>
              <div class='dropdown-menu' aria-labelledby='dropdown03'>
                <a class='dropdown-item' href='#'>Ao no Exorcist</a>
                <a class='dropdown-item' href='#'>Black Clover</a>
                <a class='dropdown-item' href='#'>Naruto</a>
                <a class='dropdown-item' href='#'>One Piece</a>
              </div>
            </li> 

<li class='nav-item'>
              <a class='nav-link' href='#'>About</a>
            </li>
            <li class='nav-item'>
              <a class='nav-link' href='#'>Contact</a>
            </li>
          </ul>
          <form action='/search' method='get' class='form-inline' role='search'>
            <input id='q' name='q' class='search js-search form-control form-control-rounded mr-sm-2' type='text' title='Enter search query here..' placeholder='Search..' aria-label='Search'/>
          </form>
        </div>
      </div>
    </nav>

4. Pasang kode CSS di bawah ini, kemudian letakkan di templatemu sebelum atau di atas kode </head>.

<style type='text/css'>
.navbar{height:auto!important;padding:.5rem 1rem!important;border-bottom:1px solid rgba(0,0,0,.1)}.navbar-dark .search{background:transparent!important;border:1px solid #dee2e6!important;color:#f9f8fa!important;}
.navbar-brand{font-family:PT Serif,serif;text-transform:lowercase;font-weight:700}nav{z-index:10}
@media (min-width:768px){.form-control-rounded{border-radius:1rem!important}.navbar .search{width:114px!important}.navbar .search:focus{width:220px!important;content:"Type here"}.navbar-brand{font-size:2rem!important}}
@media (min-width:960px){.navbar-brand{font-size:2.5rem!important}}
</style>

5. Pastikan bahwa di template blogmu tidak terdapat kode CSS yang menyembunyikan element navbar, seperti di bawah ini.

#navbar{display:none}

6. Terakhir, jangan lupa tekan tombol simpan dan lihat hasilnya.

Result

Oke, sekiranya itu tutorial mengenai cara memasang menu navigasi atau navbar bootstrap di blog. Bila kamu memiliki pertanyaan atau saran terkait dengan tutorial ini, bisa kamu sampaikan di kolom komentar lho.

Semoga bermanfaat ya! 😁

Blog Surya Adhi

NgeShare - Pasang Navbar Bootstrap di Blog

2 komentar:

Postingan Terpopuler

Pengikut Blog

Laman

Arsip Blog