Cara Membuat Dark Mode Blogger: Script Ringan & Responsive 2025

Table of Contents

Apakah kamu pernah merasa sakit mata saat membaca artikel panjang di layar HP pada malam hari? Pengunjung blog kamu pun merasakan hal yang sama. Inilah alasan mengapa cara membuat dark mode Blogger menjadi salah satu trik paling dicari oleh para pemilik website saat ini.

Fitur mode malam (dark mode) bukan sekadar tren estetika semata. Lebih dari itu, fitur ini meningkatkan kenyamanan pembaca (User Experience/UX) secara drastis. Jika pengunjung nyaman, mereka akan betah berlama-lama di blog kamu. Akibatnya, bounce rate blog kamu bisa turun dan peringkat SEO pun membaik.

Nah, kabar baiknya, kamu tidak perlu jago coding tingkat dewa untuk memasangnya. Di artikel ini, kita akan membahas panduan lengkap memasang script dark mode yang ringan, responsive, dan tentunya menyimpan pilihan pembaca secara otomatis.

Mengapa Blog Kamu Wajib Pasang Dark Mode?

Sebelum kita masuk ke dapur teknis, mari kita pahami dulu urgensinya. Tren desain web tahun 2025 semakin mengarah pada kenyamanan visual.

Pertama, mode gelap sangat membantu menghemat daya baterai pada perangkat dengan layar OLED atau AMOLED. Kedua, ini mengurangi emisi cahaya biru yang menyebabkan kelelahan mata. Jika kompetitor kamu sudah memakainya dan kamu belum, blog kamu akan terlihat "ketinggalan zaman".

Persiapan Sebelum Edit Template

Sabar, jangan langsung terjun ke kode HTML. Ada satu aturan emas yang wajib kamu patuhi sebelum mengutak-atik template blogspot: Backup Template!

Langkah ini krusial untuk mencegah error yang tidak diinginkan. Caranya sangat mudah:

1. Masuk ke Dashboard Blogger.
2. Pilih menu Tema.
3. Klik panah kecil di sebelah tombol "Sesuaikan", lalu pilih Cadangkan.

Setelah file .xml tersimpan aman di komputer, barulah kita bisa mulai eksekusi dengan tenang.

Cara Membuat Dark Mode Blogger (Panduan Langkah demi Langkah)

Metode yang akan kita gunakan adalah teknik CSS Variable dikombinasikan dengan JavaScript LocalStorage. Teknik ini jauh lebih ringan dibandingkan menggunakan plugin berat yang bisa memperlambat loading blog.

Ikuti langkah-langkah berikut dengan teliti:

Langkah 1: Pasang Kode CSS Variable

Pertama, kita harus mendefinisikan warna apa yang akan berubah saat mode gelap aktif.

1. Buka menu Tema > Edit HTML.
2. Cari kode <style> atau ]]></b:skin>.
3. Letakkan kode CSS berikut tepat di atas kode ]]></b:skin>:

/* CSS Dark Mode Blogger by IrfanD */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --link-color: #007bff;
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #f5f5f5;
  --link-color: #4da3ff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: all 0.3s ease;
}

/* Tombol Toggle */
.dark-mode-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--text-color);
  color: var(--bg-color);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  z-index: 9999;
  font-size: 24px;
}

Catatan: Sesuaikan kode warna hex di atas dengan warna tema blog kamu.

Langkah 2: Membuat Tombol Toggle

Selanjutnya, kita butuh tombol sakelar agar pengunjung bisa memilih mode yang mereka suka.

1. Cari kode </body> (biasanya ada di paling bawah).
2. Letakkan kode HTML ini tepat di atas </body>:

<div class="dark-mode-btn" id="theme-toggle" title="Ubah Mode">
  🌙
</div>

Langkah 3: Menambahkan JavaScript Pintar

Ini adalah bagian terpenting dari cara membuat dark mode Blogger. Script ini berfungsi mengingat pilihan pengunjung. Jadi, jika mereka pindah ke halaman lain, blog tetap dalam mode gelap (tidak reset kembali ke putih).

Letakkan kode ini tepat di bawah kode HTML tombol tadi, atau tetap di atas </body>:

<script>
  const toggleBtn = document.getElementById('theme-toggle');
  const currentTheme = localStorage.getItem('theme');

  // Cek preferensi tersimpan
  if (currentTheme) {
    document.documentElement.setAttribute('data-theme', currentTheme);
    if (currentTheme === 'dark') {
      toggleBtn.innerHTML = "☀️";
    }
  }

  // Fungsi klik tombol
  toggleBtn.addEventListener('click', function() {
    let theme = document.documentElement.getAttribute('data-theme');
    
    if (theme === 'dark') {
      document.documentElement.setAttribute('data-theme', 'light');
      localStorage.setItem('theme', 'light');
      toggleBtn.innerHTML = "🌙";
    } else {
      document.documentElement.setAttribute('data-theme', 'dark');
      localStorage.setItem('theme', 'dark');
      toggleBtn.innerHTML = "☀️";
    }
  });
</script>

Menguji Hasil Tampilan Mode Malam

Setelah semua kode terpasang, klik tombol Simpan (ikon disket) di pojok kanan atas editor.

Sekarang, buka blog kamu di tab baru. Kamu akan melihat tombol bulat melayang di pojok kanan bawah. Cobalah klik tombol tersebut.

• Apakah latar belakang berubah menjadi gelap?
• Apakah teks berubah menjadi putih?
• Coba refresh halaman. Apakah mode gelap tetap aktif?

Jika jawabannya "Ya" untuk semua pertanyaan, selamat! Kamu sukses menerapkan fitur canggih ini. Namun, jika ada elemen tertentu (seperti header atau footer) yang warnanya tidak berubah, kamu mungkin perlu menambahkan variabel --bg-color pada class CSS elemen tersebut secara manual.

Kesimpulan

Menerapkan cara membuat dark mode Blogger ternyata tidak sesulit bayangan, bukan? Dengan menambahkan sedikit bumbu CSS dan JavaScript, blog kamu kini tampil lebih modern, profesional, dan yang terpenting: ramah di mata pembaca.

Fitur kecil ini bisa memberikan dampak besar pada durasi kunjungan pembaca di blog kamu. Jangan ragu untuk bereksperimen dengan kombinasi warna lain agar sesuai dengan branding blog kamu.

Punya pertanyaan atau kendala saat memasang kode di atas? Tuliskan masalahmu di kolom komentar, dan mari kita diskusikan solusinya bersama!