Cara mudah menambah fitur dark mode (mode malam) pada tema blogspot agar mata tidak pedih

Menyajikan konten berita atau artikel berbobot adalah salah satu cara supaya blog banyak pengunjungnya, selain itu pula kecepatan loading page juga mempengerahui agar pengunjung blog merasa puas dan betah selalu next berkunjung untuk membaca sajian berita-berita yang sudah diupdate pada blog sobat.

Ada juga hal yang lebih penting selain menyajikan konten berbobot, dengan adanya template keren Seo Friendly rasanya belum lengkap kalau belum ada fitur "Dark Mode" (Mode Gelap). "Dark Mode" adalah fitur yang diatur untuk pembaca dalam situasi gelap (malam hari). Pengguna internet rata-rata di malam hari maka dengan adanya fitur dark mode beban cahaya tidak membuat mata perih dan pedih.

Tampilan awal dan sesudah diaktifkannya fitur dark mode bisa dilihat gambar dibawah:

Adapun cara menambah fitur "Dark Mode" pada tema blogspot cukup mudah, berikut caranya:

[Langkah Pertama]
Buka Dashboard dan edit template blog melalui Tema > Edit HTML. Jangan lupa sebelum memulai Backup template terlebih dulu.

[Langkah Kedua]
Copy paste kode CSS berikut tepat di bawah ]]></b:skin> , </b:skin> atau </head>

Tata Letak Script  dark mode

Salinan Code:

<style>
/* DARK MODE [novrian-free.blogspot.com]*/
.switch {position:relative;display:inline-block;width:60px;height:20px}
.switch input {display:none;}
.slider {position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer;background-color:#bdc3c7;-webkit-transition:.4s;transition:.4s}
.slider:before {position:absolute;content:"";height:20px;width:20px;background-color:white;-webkit-transition:.4s;transition:.4s}
input:checked + .slider {background-color:#000}
input:focus + .slider {box-shadow: 0 0 1px #2196F3}
input:checked + .slider:before {-webkit-transform: translateX(40px);-ms-transform: translateX(40px);transform: translateX(40px)}
.slider.round {border-radius:20px}
.slider.round:before {border-radius:50%}
.Night
{background-color:#000!important}
.Night #wrapper,
.Night #post-wrapper article
{background-color:#1d2129!important}
.Night #header .title,
.Night #header .title a,
.Night #header .description,
.Night #post-wrapper article
 {color:#E0E0E0!important}
</style>
===============================================

[Langkah Ketiga]
Selanjutnya salin kode Javascript di bawah ini dan taruh di atas </body>

Salinan Code:

<script>//<![CDATA[
$("#Night").click(function(){
$("body").toggleClass('Night');
});
//]]></script>

===============================================
Jangan lupa Simpan tema yang sudah dimodifikasi tadi sob !!

[Langkah Keempat]
Selanjutnya menuju ke Tata Letak > Tambah Gadget > HTML/Javascript

Salinan Code:

<label class='switch' for='Night'>
<input id='Night' type='checkbox'/>
<div class='slider round'/></label>

===============================================
Letakkan posisi widget dimana sobat sukai


Hasil berbentuk tombol ON-OFF seperti gambar dibawah

Setelah sobat mengikuti step by step cara mengaktifkan fitur "Dark Mode" maka sobat mendapatkan hasil dengan baik dan sukses, dan apabila sobat gagal menjalankan cara diatas, silakan tinggalkan pesan di kolom komentar agar segala pertanyaan terjawab dengan baik