Ini Daftar Koleksi Menu Bootstrap 5 untuk Blogspot

Kembali membahas cara menggunakan bootstrap yang disandingkan dengan blogspot. Kali ini kita masih belajar bootstrap 5 dan masuk pada tahapan membuat menu. Dan jangan ditanya apakah menu navigasi ini responsif atau tidak. Karena Bootstrap adalah framework CSS yang sangat fleksibel guna membangun sebuah website responsif.

Agar lebih jelas, silahkan klik situs demo menu bootstrap di bawah ini sebelum membahas cara membuat template website dengan bootstrap lebih jauh.

Demo

Adapun kode yang digunakan seluruhnya diambil dari getbootstrap. Hanya saja kode tersebut masih bersifat umum. Sehingga perlu sedikit adaptasi ketika kita memasukan kode ke dalam blogspot. Dan berikut ini tangkapan layar koleksi menu bootstrap yang diakses dari perangkat mobile.

Ini Daftar Koleksi Menu Bootstrap 5 untuk Blogspot

Cara Membuat Menu Navigasi Bootstrap untuk Blogspot

Masih menyambung pembahasan sebelumnya dengan tema belajar bootstrap dari nol. Praktek kita hari ini akan membuat menu navigasi yang biasa disebut dengan navbar (navigation bar).

Langsung saja kita login ke dalam dashboard Blogger > Tema > Icon tanda panah yang ada disebelah tulisan "Sesuaikan" kemudian pilih "Edit HTML".

Silahkan hapus kode template bawaan blogspot dan ganti dengan script di bawah ini (Mohon abaikan jika Anda mengikuti tutorial sebelumnya). Dan baris kode berikut ini merupakan script awal theme bootstrap yang paling dasar.

Ini Daftar Koleksi Menu Bootstrap 5 untuk Blogspot

Setelah template blogspot sudah siap dengan bootstrapnya sebagaimana terlihat pada script di atas. Langkah selanjutnya adalah menempatkan salah satu script menu navbar di bawah ini. Jangan lupa, script menu harus diletakan pada bagian body; yakni setelah tag <body> dan sebelum tag </body>.

Agar lebih rapih, saya tempatkan kode menu navbar di bawah ini tepat sebelum baris kode:

Dan sebelum baris kode:

<b:section class='main' id='main' showaddelement='yes'><b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'/></b:section>.

Selengkapnya, berikut ini daftar koleksi menu navbar bootstrap 5 yang bisa Anda pilih:

1. Menu Navbar Theme Bootstrap model ke-1:

<nav aria-label='First navbar example' class='navbar navbar-dark bg-dark'> <div class='container-fluid'> <a class='navbar-brand' href='#'>Never expand</a> <button aria-controls='navbarsExample01' aria-expanded='false' aria-label='Toggle navigation' class='navbar-toggler' data-bs-target='#navbarsExample01' data-bs-toggle='collapse' type='button'> <span class='navbar-toggler-icon'/> </button> <div class='collapse navbar-collapse' id='navbarsExample01'> <ul class='navbar-nav me-auto mb-2'> <li class='nav-item'><a aria-current='page' class='nav-link active' href='#'>Home</a></li> <li class='nav-item'><a class='nav-link' href='#'>Link</a></li> <li class='nav-item'><a aria-disabled='true' class='nav-link disabled' href='#' tabindex='-1'>Disabled</a></li> <li class='nav-item dropdown'><a aria-expanded='false' class='nav-link dropdown-toggle' data-bs-toggle='dropdown' href='#' id='dropdown01'>Dropdown</a> <ul aria-labelledby='dropdown01' class='dropdown-menu'> <li><a class='dropdown-item' href='#'>Action</a></li> <li><a class='dropdown-item' href='#'>Another action</a></li> <li><a class='dropdown-item' href='#'>Something else here</a></li> </ul> </li> </ul> <form> <input aria-label='Search' class='form-control' placeholder='Search' type='text'/> </form> </div> </div> </nav>

2. Menu Navbar Theme Bootstrap model ke-2:

<nav aria-label='Second navbar example' class='navbar navbar-expand navbar-dark bg-dark'> <div class='container-fluid'> <a class='navbar-brand' href='#'>Always expand</a> <button aria-controls='navbarsExample02' aria-expanded='false' aria-label='Toggle navigation' class='navbar-toggler' data-bs-target='#navbarsExample02' data-bs-toggle='collapse' type='button'> <span class='navbar-toggler-icon'/> </button> <div class='collapse navbar-collapse' id='navbarsExample02'> <ul class='navbar-nav me-auto'> <li class='nav-item'><a aria-current='page' class='nav-link active' href='#'>Home</a></li> <li class='nav-item'><a class='nav-link' href='#'>Link</a></li> </ul> <form> <input aria-label='Search' class='form-control' placeholder='Search' type='text'/> </form> </div> </div> </nav>

3. Menu Navbar Theme Bootstrap model ke-3:

<nav aria-label='Third navbar example' class='navbar navbar-expand-sm navbar-dark bg-dark'> <div class='container-fluid'> <a class='navbar-brand' href='#'>Expand at sm</a> <button aria-controls='navbarsExample03' aria-expanded='false' aria-label='Toggle navigation' class='navbar-toggler' data-bs-target='#navbarsExample03' data-bs-toggle='collapse' type='button'> <span class='navbar-toggler-icon'/> </button> <div class='collapse navbar-collapse' id='navbarsExample03'> <ul class='navbar-nav me-auto mb-2 mb-sm-0'> <li class='nav-item'><a aria-current='page' class='nav-link active' href='#'>Home</a></li> <li class='nav-item'><a class='nav-link' href='#'>Link</a></li> <li class='nav-item'><a aria-disabled='true' class='nav-link disabled' href='#' tabindex='-1'>Disabled</a></li> <li class='nav-item dropdown'><a aria-expanded='false' class='nav-link dropdown-toggle' data-bs-toggle='dropdown' href='#' id='dropdown03'>Dropdown</a> <ul aria-labelledby='dropdown03' class='dropdown-menu'> <li><a class='dropdown-item' href='#'>Action</a></li> <li><a class='dropdown-item' href='#'>Another action</a></li> <li><a class='dropdown-item' href='#'>Something else here</a></li> </ul> </li> </ul> <form> <input aria-label='Search' class='form-control' placeholder='Search' type='text'/> </form> </div> </div> </nav>

4. Menu Navbar Theme Bootstrap model ke-4:

<nav aria-label='Fourth navbar example' class='navbar navbar-expand-md navbar-dark bg-dark'> <div class='container-fluid'> <a class='navbar-brand' href='#'>Expand at md</a> <button aria-controls='navbarsExample04' aria-expanded='false' aria-label='Toggle navigation' class='navbar-toggler' data-bs-target='#navbarsExample04' data-bs-toggle='collapse' type='button'> <span class='navbar-toggler-icon'/> </button> <div class='collapse navbar-collapse' id='navbarsExample04'> <ul class='navbar-nav me-auto mb-2 mb-md-0'> <li class='nav-item'><a aria-current='page' class='nav-link active' href='#'>Home</a></li> <li class='nav-item'><a class='nav-link' href='#'>Link</a></li> <li class='nav-item'><a aria-disabled='true' class='nav-link disabled' href='#' tabindex='-1'>Disabled</a></li> <li class='nav-item dropdown'> <a aria-expanded='false' class='nav-link dropdown-toggle' data-bs-toggle='dropdown' href='#' id='dropdown04'>Dropdown</a> <ul aria-labelledby='dropdown04' class='dropdown-menu'> <li><a class='dropdown-item' href='#'>Action</a></li> <li><a class='dropdown-item' href='#'>Another action</a></li> <li><a class='dropdown-item' href='#'>Something else here</a></li> </ul> </li> </ul> <form> <input aria-label='Search' class='form-control' placeholder='Search' type='text'/> </form> </div> </div> </nav>

5. Menu Navbar Theme Bootstrap model ke-5:

<nav aria-label='Fifth navbar example' class='navbar navbar-expand-lg navbar-dark bg-dark'> <div class='container-fluid'> <a class='navbar-brand' href='#'>Expand at lg</a> <button aria-controls='navbarsExample05' aria-expanded='false' aria-label='Toggle navigation' class='navbar-toggler' data-bs-target='#navbarsExample05' data-bs-toggle='collapse' type='button'> <span class='navbar-toggler-icon'/> </button> <div class='collapse navbar-collapse' id='navbarsExample05'> <ul class='navbar-nav me-auto mb-2 mb-lg-0'> <li class='nav-item'><a aria-current='page' class='nav-link active' href='#'>Home</a></li> <li class='nav-item'><a class='nav-link' href='#'>Link</a></li> <li class='nav-item'><a aria-disabled='true' class='nav-link disabled' href='#' tabindex='-1'>Disabled</a></li> <li class='nav-item dropdown'><a aria-expanded='false' class='nav-link dropdown-toggle' data-bs-toggle='dropdown' href='#' id='dropdown05'>Dropdown</a> <ul aria-labelledby='dropdown05' class='dropdown-menu'> <li><a class='dropdown-item' href='#'>Action</a></li> <li><a class='dropdown-item' href='#'>Another action</a></li> <li><a class='dropdown-item' href='#'>Something else here</a></li> </ul> </li> </ul> <form> <input aria-label='Search' class='form-control' placeholder='Search' type='text'/> </form> </div> </div> </nav>

6. Menu Navbar Theme Bootstrap model ke-6:

<nav aria-label='Sixth navbar example' class='navbar navbar-expand-xl navbar-dark bg-dark'> <div class='container-fluid'> <a class='navbar-brand' href='#'>Expand at xl</a> <button aria-controls='navbarsExample06' aria-expanded='false' aria-label='Toggle navigation' class='navbar-toggler' data-bs-target='#navbarsExample06' data-bs-toggle='collapse' type='button'> <span class='navbar-toggler-icon'/> </button> <div class='collapse navbar-collapse' id='navbarsExample06'> <ul class='navbar-nav me-auto mb-2 mb-xl-0'> <li class='nav-item'><a aria-current='page' class='nav-link active' href='#'>Home</a></li> <li class='nav-item'><a class='nav-link' href='#'>Link</a></li> <li class='nav-item'><a aria-disabled='true' class='nav-link disabled' href='#' tabindex='-1'>Disabled</a></li> <li class='nav-item dropdown'><a aria-expanded='false' class='nav-link dropdown-toggle' data-bs-toggle='dropdown' href='#' id='dropdown06'>Dropdown</a> <ul aria-labelledby='dropdown06' class='dropdown-menu'> <li><a class='dropdown-item' href='#'>Action</a></li> <li><a class='dropdown-item' href='#'>Another action</a></li> <li><a class='dropdown-item' href='#'>Something else here</a></li> </ul> </li> </ul> <form> <input aria-label='Search' class='form-control' placeholder='Search' type='text'/> </form> </div> </div> </nav>

7. Menu Navbar Theme Bootstrap model ke-7:

<nav aria-label='Seventh navbar example' class='navbar navbar-expand-xxl navbar-dark bg-dark'> <div class='container-fluid'> <a class='navbar-brand' href='#'>Expand at xxl</a> <button aria-controls='navbarsExampleXxl' aria-expanded='false' aria-label='Toggle navigation' class='navbar-toggler' data-bs-target='#navbarsExampleXxl' data-bs-toggle='collapse' type='button'> <span class='navbar-toggler-icon'/> </button> <div class='collapse navbar-collapse' id='navbarsExampleXxl'> <ul class='navbar-nav me-auto mb-2 mb-xl-0'> <li class='nav-item'><a aria-current='page' class='nav-link active' href='#'>Home</a></li> <li class='nav-item'><a class='nav-link' href='#'>Link</a></li> <li class='nav-item'><a aria-disabled='true' class='nav-link disabled' href='#' tabindex='-1'>Disabled</a></li> <li class='nav-item dropdown'><a aria-expanded='false' class='nav-link dropdown-toggle' data-bs-toggle='dropdown' href='#' id='dropdownXxl'>Dropdown</a> <ul aria-labelledby='dropdownXxl' class='dropdown-menu'> <li><a class='dropdown-item' href='#'>Action</a></li> <li><a class='dropdown-item' href='#'>Another action</a></li> <li><a class='dropdown-item' href='#'>Something else here</a></li> </ul> </li> </ul> <form> <input aria-label='Search' class='form-control' placeholder='Search' type='text'/> </form> </div> </div> </nav>

8. Menu Navbar Theme Bootstrap model ke-8:

<nav aria-label='Eighth navbar example' class='navbar navbar-expand-lg navbar-dark bg-dark'> <div class='container'> <a class='navbar-brand' href='#'>Container</a> <button aria-controls='navbarsExample07' aria-expanded='false' aria-label='Toggle navigation' class='navbar-toggler' data-bs-target='#navbarsExample07' data-bs-toggle='collapse' type='button'> <span class='navbar-toggler-icon'/> </button> <div class='collapse navbar-collapse' id='navbarsExample07'> <ul class='navbar-nav me-auto mb-2 mb-lg-0'> <li class='nav-item'><a aria-current='page' class='nav-link active' href='#'>Home</a></li> <li class='nav-item'><a class='nav-link' href='#'>Link</a></li> <li class='nav-item'><a aria-disabled='true' class='nav-link disabled' href='#' tabindex='-1'>Disabled</a></li> <li class='nav-item dropdown'><a aria-expanded='false' class='nav-link dropdown-toggle' data-bs-toggle='dropdown' href='#' id='dropdown07'>Dropdown</a> <ul aria-labelledby='dropdown07' class='dropdown-menu'> <li><a class='dropdown-item' href='#'>Action</a></li> <li><a class='dropdown-item' href='#'>Another action</a></li> <li><a class='dropdown-item' href='#'>Something else here</a></li> </ul> </li> </ul> <form> <input aria-label='Search' class='form-control' placeholder='Search' type='text'/> </form> </div> </div> </nav>

9. Menu Navbar Theme Bootstrap model ke-9:

<nav aria-label='Ninth navbar example' class='navbar navbar-expand-lg navbar-dark bg-dark'> <div class='container-xl'> <a class='navbar-brand' href='#'>Container XL</a> <button aria-controls='navbarsExample07XL' aria-expanded='false' aria-label='Toggle navigation' class='navbar-toggler' data-bs-target='#navbarsExample07XL' data-bs-toggle='collapse' type='button'> <span class='navbar-toggler-icon'/> </button> <div class='collapse navbar-collapse' id='navbarsExample07XL'> <ul class='navbar-nav me-auto mb-2 mb-lg-0'> <li class='nav-item'><a aria-current='page' class='nav-link active' href='#'>Home</a></li> <li class='nav-item'><a class='nav-link' href='#'>Link</a></li> <li class='nav-item'><a aria-disabled='true' class='nav-link disabled' href='#' tabindex='-1'>Disabled</a></li> <li class='nav-item dropdown'><a aria-expanded='false' class='nav-link dropdown-toggle' data-bs-toggle='dropdown' href='#' id='dropdown07XL'>Dropdown</a> <ul aria-labelledby='dropdown07XL' class='dropdown-menu'> <li><a class='dropdown-item' href='#'>Action</a></li> <li><a class='dropdown-item' href='#'>Another action</a></li> <li><a class='dropdown-item' href='#'>Something else here</a></li> </ul> </li> </ul> <form> <input aria-label='Search' class='form-control' placeholder='Search' type='text'/> </form> </div> </div> </nav>

Penutup

Menu navigasi di atas semuanya masih terlihat sederhana. Karena sesuatu yang kompleks semuanya dimulai dari hal yang ringan. Diharapkan dengan contoh tersebut kita tidak ribet melihat kode di sana. Adapun bagi yang mempunyai kemampuan lebih silahkan kembangkan lagi script tersebut. Misalnya seperti menu navigasi disertai efek ini. Saya mendapatkan script tersebut dari orang lain di luar sana untuk dipasang di sini. Sekian tutorial cara menggunakan bootstrap kali ini tentang cara membuat menu navigasi responsif.

Selamat mencoba.

Ini Daftar Koleksi Menu Bootstrap 5 untuk Blogspot

Cara Membuat Menu Navigasi Bootstrap untuk Blogspot

Ini Daftar Koleksi Menu Bootstrap 5 untuk Blogspot

Penutup

Tidak ada komentar:

Posting Komentar

Memuat...

Nama Domain Murah

Yusuf