Berikut cara membuat header navigasi Bootstrap pada template Blogger / Blogspot.
1. Unduh dan upload file Bootstrap di getbootstrap.com
Untuk memulai proyek ini, Anda harus mengunduh file Bootstrap yang berisi css, js dan jquery, kemudian mengunggahnya ke layanan host file (mis.: gitHub) untuk dijadikan sebagai sumber CSS dan js eksternal web Anda.
Atau,
Anda bisa abaikan proses pengunduhan, cukup gunakan BootstrapCDN untuk mengirim CSS dan Javascript ke dalam proyek Anda.
Tambahkan BootstrapCDN (v4.1.3)
CSS
<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' integrity='sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO' crossorigin='anonymous' rel='stylesheet'/>jQuery, Popper.js, dan js
<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'/>Letakkan kode BootstrapCDN di atas kode
</head> atau </body>Catatan:
- Menambahkan kode CSS BootstrapCDN kedalam template Blogger mungkin akan mempengaruhi beberapa stylesheet yang sudah ada karena memiliki kesamaan pada penamaan tag, class atau id (mis.: navbar, pre, code, blockquot dan lainnya). Untuk mengurangi dampak, Anda bisa gunakan salah satu template default Blogger responsive yang masih original. Silahkan lihat DI SINI.
- Jika ada kotak iklan disamping judul Blog, sebaiknya disembunyikan atau dibuang saja.
- Sebelum melangkah lebih jauh, harap backup / cadangkan template terlebih dahulu.
- Jangan lupa lihat sumber, barangkali ada pembaruan
2. Tambahkan kode HTML
Letakkan kode HTML Bootstrap navbar diantara kode
<body>...</body> (mis.: Untuk membuat header navbar, tempatkan di atas kode <header>)<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> <div class='collapse navbar-collapse order-3 order-md-2' id='navbar'> <ul class='navbar-nav mr-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='#'>Business</a> <a class='dropdown-item' href='#'>Otomotif</a> <a class='dropdown-item' href='#'>Travel</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'>Car</a> <div class='dropdown-menu' aria-labelledby='dropdown02'> <a class='dropdown-item' href='#'>Honda</a> <a class='dropdown-item' href='#'>Nissan</a> <a class='dropdown-item' href='#'>Suzuki</a> <a class='dropdown-item' href='#'>Buggati</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'>News</a> <div class='dropdown-menu' aria-labelledby='dropdown03'> <a class='dropdown-item' href='#'>Bitcoin</a> <a class='dropdown-item' href='#'>Forex</a> <a class='dropdown-item' href='#'>Trading</a> <a class='dropdown-item' href='#'>Tools</a> </div> </li> </ul> </div> <a class='navbar-brand mx-auto order-1 order-md-3' 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'> <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>
3. Tambahkan kode CSS
Agar header navigasi Bootstrap bisa cocok diterapkan pada template default Blogger, tambahkan kode CSS berikut 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>
Dan pastikan tidak ada kode CSS yang menyembunyikan atau menyamarkan element navbar
Misal
.navbar{height:0!important}
#navbar{display:none}4. Menyembunyikan atau menyamarkan Header Blogger
Tambahkan kode CSS berikut untuk menyembunyikan elemen Header (Judul Blog)
#header-inner{height:0!important;opacity:0;}
Catatan: untuk template selain dari bawaan Blogger, mungkin menggunakan kode yang berbeda-beda. Jika mengalami kesulitan untuk menyembunyikan elemen Header, tanyakan saja pada si empunya.
Jika Anda memilih untuk mempertahankan Header asli. Hapus kode berikut untuk menghilangkan Navbar Brand (judul Blog yang ada pada header navigasi Bootstrap)
<a class='navbar-brand mx-auto order-1 order-md-3' href='/index.html'><data:blog.title/></a>
Pelajari juga:
- Cara membuat menu melayang saat di scroll (Sticky Navigation)
- Cara membuat menu navigasi slide samping
5. Bagaimana menyembunyikan navbar bawaan Blogger agar tidak mempengaruhi navbar Bootstrap?
- Nonaktifkan navbar melalui layout / tata letak
- Ubah class dan id navbar bawaan Blogger pada HTML template (mis.
<b:section class='navbarXYZ' id='navbarXYZ' ...)
4 comments:
Sukses gan, terima kasih tutorialnya keren,
Yang jadi pertanyaan, bagaimana cara ganti background navbar bootstrap? template blog warna gelap gan,
Sama-sama gan, untuk background navbar Bootstrap yang saya tahu ada dua, gelap dan terang. Untuk background gelap ganti kode berikut:
navbar-light jadi navbar-dark
bg-white jadi bg-dark
cara buat navigasi kayak blog ini gimana mas?
Ya ini tutorialnya, tinggal diikuti saja langkah demi langkah,
Saran saya, gunakan template putih/terang mis. Simple1,2 atau 3
Post a Comment