Menatap layar monitor atau layar ponsel yang terlalu terang dalam waktu lama sering kali membuat mata terasa perih dan cepat lelah. Untuk mengatasi masalah tersebut, fitur mode gelap kini telah menjadi sebuah standar wajib bagi berbagai aplikasi dan situs web modern. Kode yang akan kita pelajari kali ini berfungsi untuk menambahkan sebuah tombol sakelar ajaib di sudut layar blog Anda, yang ketika ditekan akan seketika mengubah warna latar belakang situs dari terang menjadi gelap yang menyejukkan mata.
Menerapkan fitur peredup layar ini mungkin terlihat seperti pekerjaan pemrograman tingkat tinggi yang membutuhkan perombakan sistem besar-besaran. Kenyataannya, Anda hanya membutuhkan sedikit sentuhan kode gaya visual dan logika pemrograman yang sangat ringan. Panduan ini dirancang khusus agar pemula dapat dengan mudah menempelkan kode ini tanpa perlu khawatir akan merusak tata letak atau kerangka tema blog yang sudah ada.
Apa Itu Script Tombol Mode Gelap?
Secara teknis, script mode gelap adalah perpaduan harmonis antara tiga komponen bahasa web, yaitu HTML untuk wujud tombolnya, CSS untuk desain warna gelapnya, dan JavaScript untuk mengendalikan logika kapan warna tersebut harus berubah. Saat tombol ditekan, logika JavaScript akan memberikan sebuah tanda khusus pada kerangka utama blog Anda. Tanda inilah yang kemudian memicu kode CSS untuk menimpa warna terang bawaan tema dengan warna gelap yang sudah kita tentukan.
Kehebatan lain dari kode yang dibagikan dalam tutorial ini adalah kemampuannya untuk mengingat pilihan pengunjung. Berkat fitur penyimpanan lokal pada peramban web, jika seorang pengunjung mengubah blog Anda menjadi mode gelap lalu menutup halamannya, blog Anda akan tetap berwarna gelap saat pengunjung tersebut datang kembali di keesokan harinya. Hal ini menciptakan pengalaman yang sangat personal dan konsisten.
Manfaat Penggunaan Kode Mode Gelap di Blogger
Manfaat paling utama dari fitur ini tentu saja adalah memberikan perlindungan ekstra bagi kesehatan mata para pembaca setia Anda. Pengunjung yang gemar membaca artikel panjang di malam hari akan sangat berterima kasih dengan adanya tombol ini. Kenyamanan visual ini secara psikologis akan mendorong mereka untuk membaca lebih banyak artikel dan berlama-lama menghabiskan waktu di dalam blog Anda.
Dari sisi estetika dan citra, memiliki fitur mode gelap akan mengangkat derajat blog Anda menjadi setara dengan portal berita besar atau situs perusahaan teknologi kelas dunia. Blog Anda akan terlihat sangat profesional, modern, dan selalu mengikuti tren perkembangan desain antarmuka pengguna masa kini. Hal ini secara tidak langsung juga meningkatkan tingkat kepercayaan pembaca terhadap kualitas tulisan yang Anda sajikan.
Contoh Penerapan dalam Artikel atau Halaman Blogger
Bayangkan Anda memiliki sebuah blog cerita misteri atau ulasan teknologi yang memiliki dominasi warna latar belakang putih bersih. Pada siang hari, tampilan tersebut mungkin terlihat sangat elegan. Namun, ketika ada pengunjung yang sedang berbaring di kamar gelap pada malam hari membuka cerita Anda, cahaya putih dari layar ponsel mereka akan terasa sangat menyilaukan dan mengganggu.
Dengan hadirnya tombol sakelar mungil di pojok bawah layar, pengunjung tersebut bisa langsung menyentuhnya. Seketika, layar yang tadinya menyilaukan berubah menjadi warna abu-abu gelap dengan teks berwarna putih pudar. Suasana membaca menjadi jauh lebih syahdu, baterai ponsel mereka menjadi lebih hemat, dan mereka bisa menikmati cerita misteri Anda hingga tamat tanpa keluhan sakit mata.
Kode HTML Lengkap Siap Pakai
Berikut ini adalah tiga bagian kode yang saling berkaitan untuk menciptakan keajaiban mode gelap. Pastikan Anda menyalin ketiga bagian ini agar fitur dapat berjalan dengan sempurna dan dapat mengingat preferensi pembaca.
Kode CSS untuk Tampilan dan Warna Gelap
Kode pertama ini bertugas untuk mendesain wujud tombol sakelar agar melayang di pojok layar, sekaligus menyiapkan kumpulan warna gelap yang akan diaktifkan nanti. Salin seluruh teks instruksi di bawah ini.
<style>
.tombol-mode-gelap {
position: fixed;
bottom: 20px;
left: 20px;
background-color: #202124;
color: #ffffff;
border: 2px solid #5f6368;
border-radius: 30px;
padding: 8px 16px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
z-index: 99999;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}
.tombol-mode-gelap:hover {
background-color: #3c4043;
}
body.mode-gelap-aktif {
background-color: #121212 !important;
color: #e8eaed !important;
}
body.mode-gelap-aktif .post-body,
body.mode-gelap-aktif p,
body.mode-gelap-aktif h2,
body.mode-gelap-aktif h3 {
color: #e8eaed !important;
}
body.mode-gelap-aktif a {
color: #8ab4f8 !important;
}
body.mode-gelap-aktif .tombol-mode-gelap {
background-color: #ffffff;
color: #202124;
border-color: #dadce0;
}
</style>
Kode HTML untuk Menampilkan Tombol
Kode kedua adalah kerangka fisik dari tombol sakelar itu sendiri yang akan disentuh oleh pengunjung. Teks pemanggilnya dibuat sangat singkat dan padat. Salin sebaris instruksi berikut ini.
<button class="tombol-mode-gelap" id="sakelarModeGelap">Mode Gelap</button>
Kode JavaScript untuk Logika Pengingat
Kode ketiga adalah otak dari seluruh sistem ini. Mesin logika inilah yang mendeteksi sentuhan tombol, mengubah wujud situs, dan mencatat pilihan pengunjung ke dalam memori peramban. Salin kode mesin ini secara hati-hati.
<script>
document.addEventListener("DOMContentLoaded", function() {
var tombolSakelar = document.getElementById("sakelarModeGelap");
var badanSitus = document.body;
var temaTersimpan = localStorage.getItem("pilihanTema");
if (temaTersimpan === "gelap") {
badanSitus.classList.add("mode-gelap-aktif");
tombolSakelar.innerText = "Mode Terang";
}
tombolSakelar.addEventListener("click", function() {
badanSitus.classList.toggle("mode-gelap-aktif");
var apakahGelap = badanSitus.classList.contains("mode-gelap-aktif");
if (apakahGelap) {
localStorage.setItem("pilihanTema", "gelap");
tombolSakelar.innerText = "Mode Terang";
} else {
localStorage.setItem("pilihanTema", "terang");
tombolSakelar.innerText = "Mode Gelap";
}
});
});
</script>
Cara Memasang Kode di Blogger (Mode HTML)
Pemasangan fitur modern ini sangatlah mudah karena kita hanya memanfaatkan fasilitas tata letak standar dari Blogger. Anda tidak perlu mencari baris kode yang rumit di dalam pengaturan tema inti.
Langkah pertama, pastikan Anda telah berada di halaman kendali utama Blogger. Arahkan kursor Anda ke deretan menu di sebelah kiri monitor, kemudian carilah dan klik menu yang bernama Tata Letak.
Langkah kedua, perhatikan peta kerangka situs yang muncul di layar Anda. Carilah area kosong yang posisinya tidak mengganggu artikel, misalnya di bagian paling bawah atau area kaki halaman (footer). Klik opsi Tambahkan Gadget pada area yang Anda pilih tersebut.
Langkah ketiga, setelah jendela daftar alat bantu melayang muncul, gulir ke bawah dan pilihlah alat yang bernama HTML/JavaScript dengan mengeklik ikon tambah di sampingnya.
Langkah keempat, biarkan kolom judul pada jendela baru tersebut dalam keadaan kosong. Masukkan semua kode yang telah disalin secara berurutan ke dalam kolom konten yang lebih besar. Tempelkan kode CSS pertama, dilanjutkan kode HTML, dan ditutup dengan kode JavaScript di baris paling bawah. Setelah semuanya dipastikan tertempel utuh, klik tombol Simpan.
Panduan Penggunaan Langkah demi Langkah
Berbeda dengan beberapa kode tutorial lain yang mengharuskan Anda memodifikasi tulisan artikel, fitur sakelar ini sama sekali tidak memerlukan tindakan lanjutan setelah dipasang. Anda bisa langsung menerbitkan artikel seperti biasanya tanpa tambahan apa pun.
Sistem ini dirancang untuk beroperasi secara mandiri. Begitu alat bantu di area tata letak telah tersimpan, tombol ajaib ini akan langsung muncul di setiap halaman artikel, halaman kategori, maupun halaman depan blog Anda secara otomatis.
Kode penata gaya CSS dalam paket ini sengaja menggunakan perintah penegasan mutlak untuk menargetkan elemen dasar seperti paragraf dan tautan. Ini berarti, warna apa pun yang Anda atur melalui editor teks saat menulis artikel akan secara paksa ditimpa oleh warna gelap ketika tombol ini diaktifkan, memastikan tidak ada teks yang tiba-tiba menjadi tidak terbaca.
Panduan Cara Menguji Keberhasilan Script
Sebagai pengelola situs yang cermat, Anda mutlak harus menguji kinerja tombol sakelar ini untuk memastikannya memberikan transisi warna yang diharapkan tanpa mengacaukan desain asli tema Anda.
Buka alamat blog Anda melalui peramban web di komputer maupun ponsel. Anda seharusnya langsung melihat sebuah tombol membulat berwarna gelap di pojok kiri bawah layar Anda. Cobalah klik tombol tersebut. Secara instan, layar blog Anda yang tadinya putih akan berubah menjadi warna dominan gelap, dan teks tombol akan berubah menjadi Mode Terang.
Untuk menguji daya ingat skrip ini, biarkan blog Anda dalam keadaan mode gelap, lalu tutup jendela peramban (browser) Anda sepenuhnya. Buka kembali peramban tersebut dan kunjungi lagi blog Anda. Jika situs Anda langsung terbuka dalam kondisi gelap tanpa perlu menekan tombol lagi, maka seluruh instalasi logika Anda telah berhasil sempurna.
Pembahasan Tentang Kesalahan Umum Saat Mengedit
Terkadang, transisi warna tidak berjalan dengan mulus karena adanya beberapa kesalahan kecil yang luput dari pandangan saat proses penempelan kode.
Kesalahan yang paling sering merusak fungsi tombol ini adalah hilangnya sebaris teks penutup pada area tata letak. Jika Anda secara tidak sadar menghapus tanda penutup skrip atau gaya saat menyalin, peramban web tidak akan mampu membedakan mana yang kode logika dan mana yang desain visual, sehingga tombol tidak merespons saat ditekan.
Kendala lain yang sering dilaporkan adalah beberapa elemen seperti tabel, kotak kutipan, atau judul bilah sisi tetap berwarna putih terang sementara area lainnya sudah gelap. Hal ini terjadi karena tema blog yang Anda gunakan memiliki aturan prioritas warna yang sangat ketat pada elemen tersebut. Untuk mengatasinya, Anda hanya perlu menambahkan nama elemen tersebut ke dalam kelompok kode CSS mode gelap yang telah kita buat agar ikut berubah warna.
Penutup
Memberikan kendali visual kepada pembaca adalah wujud nyata kepedulian Anda terhadap pengalaman menjelajah mereka. Tombol mode gelap bukan lagi sekadar pelengkap estetika, melainkan sebuah kebutuhan dasar bagi sebuah situs web yang menghargai kesehatan mata pengunjungnya.
Semoga susunan panduan ini sangat mudah untuk dicerna dan dapat langsung Anda terapkan tanpa rintangan berarti. Teruslah bereksperimen untuk melengkapi situs Anda dengan berbagai fitur memanjakan lainnya, dan bersiaplah menyambut audiens yang lebih betah membaca artikel-artikel Anda setiap malamnya.