Cara buat navbar bootstrap header dengan logo di blogger

Bootstrap header saat ini memang sangat digemari para pengembang website begitu juga para pecinta blog. Karena tampilannya yang lebih simpel yang menggabungkan antara manu navigasi, logo, dan kotak pencarian.

Tapi, seringkali para newbee mengalami kendala untuk memasang image logo yang diinginkan. untuk itu ikuti langkah-langkah jitu untuk bisa memasang navbat bootstrap header dengan logo yang sukses.

Langkah-langkah pemasangan Bootstrap:

1. Kode CSS dan Javascript
Gunakan bootstrapCDN untuk mengaktifkan CSS dan Javascript pada blog anda. Tambahkan/letakkan Bootstarp CDN, CSS dan Javascript, di bawah ini tepat di atas/sebelum </head> atau </body>.

CSS

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

Javascript

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

2. Tambahkan kode HTML
Letakkan kode HTML di bawah ini tepat di atas atau di bawah <header>.

HTML

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</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>
</nav>

KETERANGAN:

Jika anda ingin menambahkan logo pada header, anda bisa mengganti kode berikut:
 <a class="navbar-brand" href="#">Navbar</a>
dengan kode di bawah.
<a class='navbar-brand‘  href='/index.html'<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8uS3e2RtmWaWWSQqcF677oG0OfWJ6wpD8nrhye6e4_opDT__aoPkGwqnXLQAXl78u0AWZgPZaFzfI-08s9Et6iyhEpca6w2x3Fvkna7nEKJCtAE_jmdUPjL1S-ii35zwJ5UvNXNKCkCnX/s1600/tulis+mind+logo3.PNG‘/></a>

3. Tambahkan kode CSS


Tambahkan kode CSS di bawah tepat di atas </head> supaya tampilan header lebih bagus.
<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>

4. Cara menyembunyikan header bawaan blogger

Tambahkan kode di bawah tepat di atas </style>.
#header-inner{height:0!important;opacity:0;}

Jika anda ingin menyembunyikan logo atau judul blog di bootstrap anda bisa hapus kode berikut:
 <a class="navbar-brand" href="#">
    <img src="/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>


5. Selesai
Anda bisa coba dan semoga sukses...