NgeShare - Pasang Navbar Bootstrap di Blog

by - 11/03/2018


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

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.

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! 😁

Sawer


Anda suka dengan tulisan-tulisan di blog ini? Jika iya, maka Anda bisa ikut berdonasi untuk membantu pengembangan blog ini agar tetap hidup dan update. Silakan klik tombol sawer di bawah ini sesuai nilai donasi Anda. Terima kasih.
Share
Tweet
Pin
Share
Tags : ,

2 comments