Header adalah elemen paling atas pada halaman web termasuk blo blogger.
Di sesi ini kita akan membuat header beserta menu navigasi dropdown responsive.
Sebelumnya sudah kami katakan, bahwa kita akan menggunakan framework CSS yaitu bootstrap.
Bagi yang belum tahu, artikel ini adalah lanjutan dari sesi panduan membuat template blogger sendiri. Bagi yang mencari artikel ini untuk keperluan lain bisa menyesuaikan ya...
Mendesain header dan menu navigasi apalagi dengan fitur dropdown dan responsive tentunya akan memkan banyak waktu...
...juga kode-nya pasti akan kompleks.
Dengan menggunakan bootstrap memungkinkan untuk membuat elemen tersebut dengan cepat. Karena sudah disediakan kode-nya di dokumentasi websitenya. Kita tinggal copas dan ubah dikit.
Import Bootstrap
Sebelum membuat header dan menu-nya kita perlu mengimport paket bootstrap terlebih dahulu di blog kita.
Ada 2 file yang perlu kita import, yaitu file CSS dan JS.
Buka kode editor kalian dahulu dan buka project template blogger yang sedang dibuat.
CSS Bootstrap
Untuk menambahkan CSS bootstrap tambahkan kode berikut di atas tag </head>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css'/>JS Bootrstap
Beberapa fungsi di bootstrap membutuhkan javascript salah satu contohnya menu dropdown.
Tambahkan kode berikut tepat di atas tag </body> untuk mengimport file JS bootstrap.
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js'/>Membuat Header di Blogger
Seluruh dokumentasi tentang header dan menu sebenarnya sudah ada di web resmi bootstrap. Cuma harus disesuaikan jadi akan diubah sedikit nanti.
Jadi mari kita mulai.
Di tutorial ini, kita akan membuat header dan menu dengan desain yang sederhana dahulu.
Header dan navigasi berisi judul blog, menu, dan menu dropdown.
Ketik kode berikut setelah tag <body>
<nav class='navbar navbar-expand-lg navbar-light bg-white border-bottom'>
<div class='container'>
<a class='navbar-brand' expr:href='data:blog.homepageUrl'><data:blog.title/></a>
</div>
</nav>Simpan dan coba implementasikan ke template blogger.
Coba buka blogmu, jika berhasil tampilan kurang lebih menjadi seperti ini.
Selanjutnya adalah menu beserta dropdown-nya.
Membuat Menu Dropdown Responsive Blogger dengan Bootstrap
Fokus ke kode yang barusan kamu tambahkan.
Di atas kode </div> tambahkan kode berikut:
<button class='navbar-toggler' type='button' data-bs-toggle='collapse' data-bs-target='#navbarSupportedContent' aria-controls='navbarSupportedContent' aria-expanded='false' aria-label='Toggle navigation'>
<span class='navbar-toggler-icon'/>
</button>Fungsinya adalah menampilkan icon menu ketika di akses di media query lebih kecil seperti akses menggunakan HP atau Tablet.
Nah untuk menambahkan menu-nya ketikkan kode berikut di bawah kode di atas.
<div class='collapse navbar-collapse' id='navbarSupportedContent'>
<ul class='navbar-nav me-auto mb-2 mb-lg-0'>
<li class='nav-item'>
<a class='nav-link' href='#'>Menu 1</a>
</li>
</ul>
</div>Untuk menambahkan menu lagi, tinggal duplikat kode dari <li>...</li> lalu sesuaikan isinya.
Misal:
<div class='collapse navbar-collapse' id='navbarSupportedContent'>
<ul class='navbar-nav me-auto mb-2 mb-lg-0'>
<li class='nav-item'>
<a class='nav-link' href='#'>Menu 1</a>
</li>
<li class='nav-item'>
<a class='nav-link' href='#'>Menu 2</a>
</li>
</ul>
</div>Selanjutnya adalah menambahkan menu dropdown bagi yang membutuhkan.
Caranya tinggal copas atau ketikkan kode berikut di atas tag </ul>
<li class='nav-item dropdown'>
<a class='nav-link dropdown-toggle' href='#' id='navbarDropdown' role='button' data-bs-toggle='dropdown' aria-expanded='false'>
Dropdown
</a>
<ul class='dropdown-menu' aria-labelledby='navbarDropdown'>
<li><a class='dropdown-item' href='#'>Menu 1</a></li>
<li><a class='dropdown-item' href='#'>Menu 2</a></li>
<li><a class='dropdown-item' href='#'>Menu 3</a></li>
</ul>
</li>Ganti seluruh tanda # dengan link url dan Menu 1, dst dengan nama menu yang diinginkan. Jika belum ada pandangan bisa dibiarkan.
Hasil Akhir
Hasil akhir dari header dan menu yang saya buat, dan setelah disesuaikan sedikit menjadi seperti di bawah.
<nav class='navbar navbar-expand-lg navbar-light bg-white border-bottom'>
<div class='container'>
<a class='navbar-brand' expr:href='data:blog.homepageUrl'><data:blog.title/></a>
<button class='navbar-toggler' type='button' data-bs-toggle='collapse' data-bs-target='#navbarSupportedContent' aria-controls='navbarSupportedContent' aria-expanded='false' aria-label='Toggle navigation'>
<span class='navbar-toggler-icon'/>
</button>
<div class='collapse navbar-collapse' id='navbarSupportedContent'>
<ul class='navbar-nav me-auto mb-2 mb-lg-0'>
<li class='nav-item'>
<a class='nav-link' expr:href='data:blog.homepageUrl'>Beranda</a>
</li>
<li class='nav-item dropdown'>
<a class='nav-link dropdown-toggle' href='#' id='navbarDropdown' role='button' data-bs-toggle='dropdown' aria-expanded='false'>
Kategori
</a>
<ul class='dropdown-menu' aria-labelledby='navbarDropdown'>
<li><a class='dropdown-item' href='#'>Menu 1</a></li>
<li><a class='dropdown-item' href='#'>Menu 2</a></li>
<li><a class='dropdown-item' href='#'>Menu 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>Silahkan disesuaikan sendiri dan selamat berkereasi.
Selanjutnya coba copaskan semua kode template di kode editor ke edit HTML template.
Simpan dan lihat perubahannya.
Selamat... kamu berhasil menyelesaikan sesi ke 3 dari tutorial membuat template blog dari nol.
Jika ada kendala tinggalkan pertanyaan di kolom komentar.
Selanjutnya kita akan membuat elemen footer. Klik tombol materi selanjutnya untuk melanjutkan tutorial membuat template blogger sendiri.
