Tips Tutorial Cara Menciptakan Header Navigasi Bootstrap Pada Template Blogger
Header Navigasi ala template Boostrap yang menggabungkan antara judul Blog, sajian navigasi dan kotak pencarian dalam satu baris, tampaknya ...
https://tutorialcarapintar.blogspot.com/2019/11/tips-tutorial-cara-menciptakan-header.html
Header Navigasi ala template Boostrap yang menggabungkan antara judul Blog, sajian navigasi dan kotak pencarian dalam satu baris, tampaknya sedang menjadi trend. Desain header Blog menyerupai ini memang mempunyai banyak kelebihan, selain tampilannya yang sangat keren dan atraktif, header navigasi Bootstrap juga sangat mudah dan irit ruang, cocok dengan kondisi ketika ini yang memang didominasi oleh pengguna seluler.
Berikut cara menciptakan 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 dapat abaikan proses pengunduhan, cukup gunakan BootstrapCDN untuk mengirim CSS dan Javascript ke dalam proyek Anda.
Tambahkan BootstrapCDN (v4.1.3)
CSS
jQuery, Popper.js, dan js
Letakkan arahan BootstrapCDN di atas arahan
Catatan:
2. Tambahkan arahan HTML
Letakkan arahan HTML Bootstrap navbar diantara arahan
3. Tambahkan arahan CSS
Agar header navigasi Bootstrap dapat cocok diterapkan pada template default Blogger, tambahkan arahan CSS berikut di atas arahan
Dan pastikan tidak ada arahan CSS yang menyembunyikan atau menyamarkan element navbar
Misal
4. Menyembunyikan atau menyamarkan Header Blogger
Tambahkan arahan CSS berikut untuk menyembunyikan elemen Header (Judul Blog)
Catatan: untuk template selain dari bawaan Blogger, mungkin memakai arahan yang berbeda-beda. Jika mengalami kesulitan untuk menyembunyikan elemen Header, tanyakan saja pada si empunya.
Jika Anda menentukan untuk mempertahankan Header asli. Hapus arahan berikut untuk menghilangkan Navbar Brand (judul Blog yang ada pada header navigasi Bootstrap)
Pelajari juga:
5. Bagaimana menyembunyikan navbar bawaan Blogger supaya tidak mempengaruhi navbar Bootstrap?
Berikut cara menciptakan 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 dapat 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 arahan BootstrapCDN di atas arahan
</head> atau </body>Catatan:
- Menambahkan arahan CSS BootstrapCDN kedalam template Blogger mungkin akan mempengaruhi beberapa stylesheet yang sudah ada sebab mempunyai kesamaan pada penamaan tag, class atau id (mis.: navbar, pre, code, blockquot dan lainnya). Untuk mengurangi dampak, Anda dapat 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 arahan HTML
Letakkan arahan HTML Bootstrap navbar diantara arahan
<body>...</body> (mis.: Untuk menciptakan 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 arahan CSS
Agar header navigasi Bootstrap dapat cocok diterapkan pada template default Blogger, tambahkan arahan CSS berikut di atas arahan
</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 arahan CSS yang menyembunyikan atau menyamarkan element navbar
Misal
.navbar{height:0!important} #navbar{display:none}4. Menyembunyikan atau menyamarkan Header Blogger
Tambahkan arahan CSS berikut untuk menyembunyikan elemen Header (Judul Blog)
#header-inner{height:0!important;opacity:0;} Catatan: untuk template selain dari bawaan Blogger, mungkin memakai arahan yang berbeda-beda. Jika mengalami kesulitan untuk menyembunyikan elemen Header, tanyakan saja pada si empunya.
Jika Anda menentukan untuk mempertahankan Header asli. Hapus arahan 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 menciptakan sajian melayang ketika di scroll (Sticky Navigation)
- Cara menciptakan sajian navigasi slide samping
5. Bagaimana menyembunyikan navbar bawaan Blogger supaya 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' ...)
