Cara Membuat Tombol Dark Mode (Mode Gelap) Keren Hanya dengan CSS & JS Ringan

4/07/2026
Cara Membuat Tombol Dark Mode atau Mode Gelap di Blogger dengan CSS dan JavaScript

Fitur Dark Mode atau Mode Gelap di Blogger dapat menjadi tambahan yang menarik untuk membuat tampilan blog lebih modern sekaligus memberikan pilihan tampilan kepada pengunjung. Dengan tombol khusus, pengunjung dapat beralih dari mode terang ke mode gelap tanpa harus mengubah pengaturan template secara manual.

Pada tutorial ini, kita akan membahas cara membuat tombol Dark Mode di Blogger menggunakan CSS dan JavaScript. Kode yang digunakan cukup sederhana dan dapat dipasang melalui gadget HTML/JavaScript Blogger tanpa membutuhkan library eksternal.

Selain mengubah tampilan halaman, script ini juga menggunakan localStorage untuk menyimpan pilihan tema pada browser. Dengan demikian, pilihan mode yang digunakan pengunjung dapat diterapkan kembali ketika halaman blog dibuka lagi selama data penyimpanan browser masih tersedia.

Apa Itu Dark Mode di Blogger?

Dark Mode adalah tampilan antarmuka dengan background berwarna gelap dan warna teks yang disesuaikan agar tetap mudah dibaca. Fitur ini banyak digunakan pada aplikasi dan website modern sebagai alternatif dari tampilan terang.

Pada Blogger, fitur Dark Mode dapat dibuat dengan menambahkan class tertentu pada elemen body. Ketika class tersebut aktif, CSS akan mengubah warna background, teks, link, dan elemen lain yang sudah ditentukan.

JavaScript digunakan untuk mengatur tombol pengubah tema. Ketika tombol diklik, script akan mengaktifkan atau menonaktifkan class Dark Mode sesuai kondisi halaman.

Bagaimana Cara Kerja Dark Mode Blogger?

Fitur ini menggunakan tiga bagian utama, yaitu:

  • HTML untuk membuat tombol Dark Mode.
  • CSS untuk menentukan tampilan mode gelap.
  • JavaScript untuk mengatur pergantian tema dan menyimpan preferensi pengguna.

Ketika tombol ditekan, JavaScript akan menambahkan class:

mode-gelap-aktif

ke elemen body. CSS kemudian membaca class tersebut dan menerapkan warna Dark Mode.

Ketika tombol ditekan kembali, class akan dihapus sehingga tampilan blog kembali ke mode terang.

Manfaat Membuat Dark Mode di Blogger

Dark Mode dapat memberikan alternatif tampilan bagi pengunjung blog. Fitur ini sangat cocok untuk website yang memiliki banyak artikel atau konten yang sering dibaca dalam waktu cukup lama.

  • Memberikan pilihan tampilan kepada pengunjung.
  • Membuat desain blog terlihat lebih modern.
  • Memberikan tampilan alternatif pada kondisi pencahayaan rendah.
  • Meningkatkan fleksibilitas antarmuka karena pengguna dapat memilih mode terang atau gelap.
  • Dapat dibuat menggunakan CSS dan JavaScript tanpa library eksternal.

Perlu diperhatikan bahwa Dark Mode bukan faktor SEO yang secara langsung menentukan peringkat artikel. Fitur ini lebih berhubungan dengan tampilan dan pengalaman pengguna.

Contoh Penggunaan Dark Mode pada Blog

Fitur Dark Mode dapat diterapkan pada berbagai jenis blog, seperti blog teknologi, blog tutorial, blog pribadi, website portofolio, blog cerita, website informasi, dan berbagai website berbasis Blogger.

Pengunjung dapat menggunakan mode terang ketika berada di tempat dengan pencahayaan cukup. Ketika kondisi sekitar lebih gelap, pengunjung dapat memilih mode gelap melalui tombol yang tersedia pada halaman.

Kode CSS Dark Mode Blogger

Langkah pertama adalah menambahkan CSS untuk mengatur desain tombol dan tampilan mode gelap.


<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>

Penjelasan CSS

Bagian .tombol-mode-gelap digunakan untuk mengatur tampilan tombol. Properti position: fixed membuat tombol tetap berada pada posisi tertentu di layar ketika halaman digulir.

bottom: 20px;
left: 20px;

Kode tersebut membuat tombol berada 20 piksel dari bagian bawah dan sisi kiri layar.

Sedangkan selector:

body.mode-gelap-aktif

digunakan sebagai penanda bahwa mode gelap sedang aktif.

Kode HTML Tombol Mode Gelap

Setelah CSS ditambahkan, buat tombol dengan HTML berikut:


<button class="tombol-mode-gelap" id="sakelarModeGelap">
    Mode Gelap
</button>

ID sakelarModeGelap nantinya digunakan oleh JavaScript untuk menemukan tombol tersebut.

Kode JavaScript Dark Mode Blogger

JavaScript berikut berfungsi mengaktifkan dan menonaktifkan mode gelap sekaligus menyimpan pilihan pengguna menggunakan localStorage.


<script>
document.addEventListener("DOMContentLoaded", function() {
    var tombolSakelar = document.getElementById("sakelarModeGelap");
    var badanSitus = document.body;
    var temaTersimpan = localStorage.getItem("pilihanTema");

    if (!tombolSakelar) return;

    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>

Penjelasan JavaScript

Script dimulai dengan:

document.addEventListener("DOMContentLoaded", function() {

Perintah tersebut memastikan script dijalankan setelah struktur HTML halaman selesai dimuat.

Selanjutnya JavaScript mengambil tombol berdasarkan ID:

document.getElementById("sakelarModeGelap");

Script kemudian membaca tema yang tersimpan pada browser menggunakan:

localStorage.getItem("pilihanTema");

Jika tema yang tersimpan adalah gelap, class Dark Mode langsung ditambahkan ke body.

Ketika tombol ditekan, script menjalankan:

badanSitus.classList.toggle("mode-gelap-aktif");

Fungsi toggle() akan menambahkan class ketika belum tersedia dan menghapusnya ketika class tersebut sudah aktif.

Kode Lengkap Dark Mode Blogger Siap Pakai

Jika Anda ingin memasang seluruh fitur sekaligus, gunakan kode berikut:


<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>

<button class="tombol-mode-gelap" id="sakelarModeGelap">
    Mode Gelap
</button>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var tombolSakelar = document.getElementById("sakelarModeGelap");
    var badanSitus = document.body;
    var temaTersimpan = localStorage.getItem("pilihanTema");

    if (!tombolSakelar) return;

    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 Dark Mode di Blogger

Setelah kode lengkap tersedia, Anda dapat memasangnya melalui gadget HTML/JavaScript pada menu Tata Letak Blogger.

Langkah 1: Buka Dashboard Blogger

Masuk ke dashboard Blogger dan pilih blog yang ingin Anda tambahkan fitur Dark Mode.

Langkah 2: Pilih Menu Tata Letak

Pada menu sebelah kiri dashboard Blogger, klik Tata Letak.

Langkah 3: Tambahkan Gadget HTML/JavaScript

Cari area layout yang sesuai, kemudian klik Tambahkan Gadget dan pilih HTML/JavaScript.

Langkah 4: Masukkan Kode

Biarkan kolom judul kosong jika tidak ingin menampilkan judul gadget. Selanjutnya tempelkan kode lengkap Dark Mode yang telah disediakan.

Langkah 5: Simpan Perubahan

Klik Simpan, kemudian simpan perubahan pada halaman Tata Letak Blogger.

Langkah 6: Periksa Blog

Buka blog menggunakan browser. Tombol Mode Gelap seharusnya tampil pada bagian kiri bawah layar.

Cara Menguji Dark Mode Blogger

Setelah pemasangan selesai, lakukan pengujian untuk memastikan semua bagian bekerja dengan baik.

  1. Buka halaman blog.
  2. Pastikan tombol Mode Gelap muncul.
  3. Klik tombol tersebut.
  4. Periksa apakah background berubah menjadi gelap.
  5. Periksa warna teks dan link.
  6. Pastikan tulisan tombol berubah menjadi Mode Terang.
  7. Klik kembali untuk mengembalikan mode terang.
  8. Tutup dan buka kembali halaman untuk menguji penyimpanan preferensi.

Cara Mengubah Posisi Tombol Dark Mode

Posisi tombol dapat diubah melalui CSS.

Untuk mengubah jarak dari bagian bawah layar:

bottom: 20px;

Untuk mengubah jarak dari sisi kiri:

left: 20px;

Misalnya:

bottom: 30px;
left: 30px;

Jika ingin tombol berada di sebelah kanan, Anda dapat menggunakan:

right: 20px;
left: auto;

Cara Mengubah Warna Tombol Dark Mode

Warna tombol dapat disesuaikan melalui properti background-color.

Warna tombol normal:

background-color: #202124;

Warna ketika tombol diarahkan kursor:

background-color: #3c4043;

Sedangkan warna tombol ketika mode gelap aktif diatur melalui:

body.mode-gelap-aktif .tombol-mode-gelap {
    background-color: #ffffff;
    color: #202124;
}

Cara Mengubah Warna Background Mode Gelap

Background Dark Mode ditentukan melalui kode berikut:

body.mode-gelap-aktif {
    background-color: #121212 !important;
}

Anda dapat mengganti #121212 dengan kode warna gelap lain sesuai dengan desain template.

Cara Mengubah Warna Teks Dark Mode

Warna teks pada mode gelap dapat diatur melalui:

color: #e8eaed !important;

Untuk warna link:

body.mode-gelap-aktif a {
    color: #8ab4f8 !important;
}

Pemisahan warna teks dan link membantu membuat tautan tetap mudah dikenali oleh pengunjung.

Menyesuaikan Dark Mode dengan Template Blogger

Setiap template Blogger dapat memiliki struktur HTML dan class CSS yang berbeda. Oleh karena itu, kode Dark Mode mungkin belum otomatis mengubah semua elemen pada template tertentu.

Beberapa bagian seperti sidebar, menu, widget, tabel, komentar, footer, atau kotak khusus dapat memiliki selector CSS sendiri.

Jika terdapat elemen yang masih berwarna terang, Anda dapat menambahkan selector tersebut ke dalam CSS Dark Mode.

Contohnya:

body.mode-gelap-aktif .sidebar {
    background-color: #181818 !important;
    color: #e8eaed !important;
}

Tips Membuat Dark Mode Blogger yang Nyaman

Dark Mode yang baik bukan sekadar mengganti warna background menjadi hitam. Pastikan semua elemen penting tetap mudah dibaca.

  • Gunakan kontras warna teks dan background yang cukup.
  • Pastikan link tetap terlihat jelas.
  • Periksa warna tombol dan menu.
  • Pastikan gambar tetap terlihat dengan baik.
  • Uji tampilan pada smartphone dan desktop.
  • Pastikan tombol tidak menutupi elemen penting.

Masalah Umum Saat Memasang Dark Mode

1. Tombol Tidak Muncul

Pastikan kode HTML tombol sudah terpasang dan gadget HTML/JavaScript telah disimpan dengan benar.

Periksa juga ID berikut:

id="sakelarModeGelap"

2. Tombol Bisa Diklik tetapi Warna Tidak Berubah

Periksa selector CSS:

body.mode-gelap-aktif

Nama class tersebut harus sama dengan class yang ditambahkan JavaScript.

3. Beberapa Elemen Tetap Berwarna Putih

Hal tersebut dapat terjadi karena template memiliki aturan CSS khusus. Tambahkan selector elemen yang bermasalah ke aturan Dark Mode.

4. Teks Sulit Dibaca

Sesuaikan warna teks dan background agar memiliki kontras yang baik. Jangan hanya mengubah background tanpa mengatur warna elemen lainnya.

5. Pilihan Tema Tidak Tersimpan

Script menggunakan localStorage. Jika data penyimpanan browser dihapus atau dibatasi, pilihan tema sebelumnya mungkin tidak dapat dipulihkan.

Apakah Dark Mode Mempengaruhi SEO Blogger?

Dark Mode bukan faktor ranking SEO secara langsung. Fitur ini lebih berkaitan dengan desain dan pengalaman pengguna.

Untuk optimasi SEO Blogger, tetap prioritaskan konten berkualitas, struktur heading yang jelas, kecepatan halaman, responsivitas, internal link, optimasi gambar, dan relevansi konten dengan kebutuhan pengguna.

Dark Mode dapat menjadi fitur tambahan yang membuat blog lebih fleksibel, tetapi tidak menggantikan elemen SEO utama.

FAQ Dark Mode Blogger

Apa itu Dark Mode di Blogger?

Dark Mode adalah fitur yang mengubah tampilan blog dari mode terang menjadi tampilan dengan background dan elemen yang lebih gelap.

Apakah Dark Mode bisa dibuat tanpa plugin?

Ya. Dark Mode dapat dibuat menggunakan HTML, CSS, dan JavaScript tanpa membutuhkan library eksternal.

Apakah pilihan Dark Mode bisa disimpan?

Ya. Script pada tutorial ini menggunakan localStorage untuk menyimpan pilihan tema pada browser.

Apakah Dark Mode bisa digunakan di HP?

Ya. Tombol Dark Mode dapat digunakan pada smartphone maupun desktop selama tampilan template mendukungnya dengan baik.

Kenapa beberapa bagian blog tidak berubah menjadi gelap?

Setiap template Blogger memiliki struktur dan selector CSS yang berbeda. Beberapa elemen mungkin membutuhkan CSS tambahan agar ikut berubah ketika Dark Mode aktif.

Apakah warna tombol Dark Mode bisa diganti?

Ya. Warna tombol dapat diubah melalui properti background-color, color, dan border-color pada CSS.

Apakah posisi tombol Dark Mode bisa dipindahkan?

Ya. Posisi tombol dapat diubah menggunakan properti bottom, left, atau right pada CSS.

Kesimpulan

Cara membuat tombol Dark Mode di Blogger menggunakan CSS dan JavaScript dapat dilakukan dengan kode yang relatif sederhana. HTML digunakan untuk membuat tombol, CSS mengatur tampilan mode gelap, sedangkan JavaScript menangani proses pergantian tema dan penyimpanan preferensi pengguna.

Dengan memanfaatkan localStorage, pilihan tema dapat disimpan pada browser sehingga mode yang dipilih pengguna dapat diterapkan kembali ketika halaman dibuka selama data penyimpanan tersebut masih tersedia.

Fitur Dark Mode cocok digunakan pada berbagai jenis blog, terutama blog yang memiliki banyak konten dan ingin memberikan alternatif tampilan kepada pengunjung.

Jika ada bagian template yang belum berubah menjadi gelap, Anda dapat menambahkan selector CSS khusus sesuai struktur template Blogger yang digunakan. Dengan penyesuaian tersebut, tampilan Dark Mode dapat dibuat lebih konsisten dan nyaman digunakan pada berbagai perangkat.

Baca Artikel Lainnya

Kembali ke Beranda
Link profil berhasil disalin!