Pembahasan sebelumnya kita sudah membuat menu navigasi theme blogger dengan bootstrap. Namun pada menu tersebut tidak disertai dengan fitur dark mode. Sedangkan fitur ini sudah maklum banyak digunakan website seiring kemampuan sistem operasi yang juga mendukung hal tersebut.
Oleh karena itu kita akan kembali membahas tentang fitur dark mode. Dan ini bukan script dark mode dengan jQuery seperti pembahasan dulu. Melainkan dengan bantuan Bootstrap versi baru yang sudah mendukung fitur dark mode. Dan sekali lagi, fitur dark mode ini bukan mengatur otomatisasi melalui pengaturan bawaan dari sistem operasi yang digunakan.
Melainkan fitur dark mode manual yang disertai tombol untuk mengaktifkannya. Dan ini semua hanya dengan Bootstrap terbaru tanpa disertai jQuery sedikit pun. Alhamdulillah kemarin ketemu sebuah style "dark mode switcher" yang bisa dikombinasikan dengan menu navigasi yang dibuat Bootstrap.
Dan switcher ini asalnya dibuat oleh csssript yang kemarin saya share cara adaptasinya ke Blogger. Kemudian, baris kode tersebut digabungkan dengan menu navbar pertama yang saya revisi. Anda tertarik untuk mencobanya? Pastikan sudah menggunakan template blogger sendiri dari nol yah.
Theme Blogger Bootstrap (7); Menambahkan Fitur Dark Mode
Pada tutorial kali ini kita akan membuat menu navigasi lagi namun disertai fitur dark mode. Saat ini fitur dark mode belum dimasukan ke dalam theme Sebardi Blog yang sudah dibagikan. Meskipun pada template tersebut sudah disertai dengan menu navbar yang akan kita buat.
Untuk memudahkan pemahaman anggap saja menu navbar ini disebut menu navigasi pertama. Kemudian saya isi di dalamnya berupa tautan ke halaman statis. Seperti page berisi tentang blog, kebijakan privasi dan lain-lain. Hal ini untuk membedakannya dengan menu navigasi utama.
Siap untuk mengikuti pelajaran selanjutnya tentang cara membuat template blogger dengan bootstrap? Simak pembahasan kali ini tentang cara menambahkan fitur dark mode sakaligus membuat navbar baru.
1. Login ke dashboard Blogger.
2. Klik "Tema", klik icon "▼" di sebelah tulisan SESUAIKAN kemudian klik "Edit HTML".
3. Pastikan template yang digunakan adalah theme blogger sendiri. Yang terlewat pembahasan dasarnya silahkan buka kembali cara membuat template blogger sendiri dari nol paling awal.
4. Pastikan sudah memasang link CDN Bootstrap versi terbaru. Lihat kembali cara pemasangan Bootstrap melalui CDN.
5. Masukan (data-bs-theme='dark') pada tag <html> sehingga terlihat seluruhnya seperti di bawah ini.
6. Buat sebuah menu yang sudah disertai dengan fitur dark mode seperti berikut:
7. Dan sebetulnya, kode dark mode switch di atas dimulai dari baris kode berikut (lainnya navbar).
8. Namun jika ingin mencukupkan dengan kode dark mode switch berikut ini juga tidak mengapa.
9. Copas kode JavaScript berikut ini dan tempatkan sebelum tag </body>.
10. Simpan template.
11. Menu navbar akan terlihat disertai dengan tombol menu dark mode sebagai berikut:
12. Klik untuk mengaktifkan theme dengan mode gelap tersebut. Kemudian tekan lagi untuk menonaktifkannya.
13. Jika tampilan di layar terlihat sebagaimana screenshot di atas sudah berhasil ya.
Penutup
Fungsi dark mode kini semakin mudah dilekatkan pada theme berbasis Bootstrap. Meskipun pembahasan Bootstrap yang dikombinasikan dengan Blogger mungkin tidak banyak. Namun saya sendiri belum menerapkan fitur tersebut karena masih memilih style yang ingin digunakan.
Dan sebetulnya ada lagi style lain yang membahas script dark mode dengan Bootstrap ini. Sayangnya saya belum berhasil menerapkannya sesuai dengan lingkungan Blogger. Salah satunya justru yang dijelaskan pada laman Bootstrap dalam dokumentasinya.
Di sana terdapat JavaScript yang bertugas untuk membuat perubahan template secara manual. Namun entah sampai detik ini belum berhasil jika dilekatkan dengan platform Blogger. Mungkin ada kesalahan yang belum saya sadari karena ketidakmampuan saya dalam memahaminya.
Mudah-mudahan blogger yang lain bisa saling berbagi ya.
Selamat mencoba.
Tidak ada komentar:
Posting Komentar