Hari ini saya tertarik untuk mencoba memperbaiki menu navigasi pertama. Gara-garanya karena menemukan koleksi icon pergantian themes di toggle.dev. Dari koleksi yang ada terlihat icon "half sun" seperti menarik untuk dicoba. Mungkin karena pernah melihat icon ini pada laman bantuan Google. Barangkali teman-teman juga sudah famiiar bukan dengan icon tersebut?
Jika tertarik untuk mencobanya saya akan share baris kode tersebut. Hanya saja apa yang dibagikan di sini sudah termasuk didalamnya dengan kombinasi kode lain. Seperti kode JavaScript yang masih menggunakan kode dari github agar tombol dark mode berfungsi.
Sehingga apa yang dibungkus dalam seluruh kode di bawah ini menghasilkan sebuah menu navigasi. Didalamnya sudah terdapat link menuju logo website yang bisa diubah. Serta menu pencarian dan tombol dark mode yang sudah berfungsi. Dan semuanya masih tetap dalam bingkai Bootstrap versi 5.
Dengan kata lain, artikel ini merupakan modifikasi dari artikel sebelumnya yang menulis catatan perubahan pada menu navigasi pertama. Dan yang membedakan adalah icon untuk mengaktifkan pergantian template dari "light" menjadi "dark" menjadi "half sun".
Cara Membuat Menu Navbar Dark Mode dengan Icon Half Sun
Untuk menghasilkan template yang sesuai selera membutuhkan proses panjang. Apalagi kemampuan coding kita yang masih meraba-raba. Meskipun sebetulnya banyak kode yang dibagikan secara gratis di internet. Tapi tetap saja ketika menerapkan pada template sendiri membutuhkan banyak penyesuaian.
Seperti yang saya alami sendiri sejak awal membuat template blogger dari nol. Dan ini adalah salah satu contoh kasusnya yang bisa saya ceritakan. Sebuah menu navigasi yang berdasarkan Bootstrap dengan fitur Dark Mode. Karena melihat ada icon lain yang terlihat cantik serta merta ingin hati memilikinya.
Selengkapnya, berikut ini hasil belajar otodidak saya membuat menu navigasi berdasarkan Bootstrap menggunakan icon Half Sun yang sudah disertai fungsi dark mode.
1. Login ke dashboard Blogger.
2. Klik "Tema", klik icon "▼" di sebelah tulisan SESUAIKAN kemudian klik "Edit HTML".
3. Pastikan sudah menggunakan theme blogger sendiri dari nol.
4. Gunakan CDN Bootstrap pada theme tersebut.
5. Aktifkan dark mode dengan menempatkan kode:" data-bs-theme='dark' " pada tag html seperti ini:
6. Tempatkan baris kode navigasi di bawah ini setelah <body>.
7. Tempatkan kode JavaScriptnya sebelum </body>.
8. Hilangkan checkbox dengan kode CSS berikut yang ditempatkan sebelum ]]></b:skin>.
9. Klik Save untuk menyimpan perubahan pada template.
10. Icon lainnya bisa merujuk toggle.dev kemudian ganti baris kode di bawah ini (lihat langkah nomor 6) serta beri nama classnya menjadi 'form-check-label' dengan penambahan kode for='lightSwitch' agar terhubung dengan kode JavaScript.
11. Berikut ini tampilan layar hasil dari kode-kode di atas.
12. Dan jika icon half sun diklik nanti terlihat seperti ini:
Penutup
Theme Toggles adalah kumpulan tombol switch dalam bentuk icon yang cantik dan mudah digunakan. Toggle tersebut dirancang untuk mempermudah peralihan antara mode terang (light mode) dan mode gelap (dark mode). Dan ini merupakan perpustakaan modular yang bertujuan untuk memberikan banyak penyesuaian jika diperlukan. Terutama bagi kita yang jujur saja tidak bisa menulis kode sendiri dari nol.
Sebagaimana dilansir toggle.dev, theme toggles tersebut bisa bekerja dengan banyak framework CSS. Dan contoh framework yang disebut pada laman tersebut yaitu Tailwind CSS. Kemudian saya mencobanya namun bukan dengan framework Tailwind. Melainkan framework Bootstrap yang dikombinasikan dengan platform Blogger yang ternyata berhasil.
Teman-teman ada yang mempunyai kendala? Semoga saja tidak ya!
Selamat mencoba.
Tidak ada komentar:
Posting Komentar