Cara Menambah Fitur Dark Mode Dengan Tombol Pada Blog

Ciri-ciri blog yang baik selain menyajikan konten yang memuaskan adalah memberikan kenyamanan kepada pengunjung melalui desain yang ciamik. Salah satu contoh fitur blog dalam hal desain yang memiliki pengaruh kuat terhadap user experience adalah Tombol Dark Mode (Mode Malam). Fitur ini berguna untuk mengubah tema blog menjadi gelap sehingga pencahayaannya berkurang.

Seperti yang Agan tahu, rata-rata waktu pengguna internet mengakses dunia maya adalah pada malam hari. Itulah sebabnya fitur Dark Mode diperlukan guna mengurangi beban cahaya ke mata. Bahkan YouTube pun menambahkan fitur ini pada situsnya karena memahami bagaimana ramainya netizen menonton video online disaat waktu tidur.

SyamSalabim tak mau ketinggalan juga menggunakan fitur Dark Mode ini pada salah satu blog yang dimiliki. Silahkan melihat demonya disini: Syamsons - Top Song Lyrics Collection


Bagi Agan yang ingin melakukan hal yang sama dengan menambah fitur Dark Mode dilengkapi tombol switch on/off pada blog pribadi, langkah-langkahnya cukup mudah seperti yang dijelaskan pada tutorial berikut.

TUTORIAL

1. Buka Dashboard dan edit template blog melalui Tema > Edit HTML. Jangan lupa sebelum memulai Backup template terlebih dulu.

2. Copy paste kode CSS berikut tepat di bawah ]]></b:skin>.

<style>
/* DARK MODE [syamsalabim.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>

3. Selanjutnya salin kode Javascript di bawah ini dan taruh di atas </body>.

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

4. Jika sudah maka Simpan Tema yang telah dimodifikasi. Lalu beralih ke Tata Letak dan salin kode HTML berikut.

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

5. Kode tersebut adalah tombol switch on/off yang nantinya dapat digunakan untuk mengganti tema normal ke mode malam. Boleh diletakkan dimana saja tapi untuk praktisnya pasang dalam Gadget melalui Tata Letak > Tambah Gadget > HTML/Javascript.

Demikian tutorial menambahkan fitur Dark Mode pada blog lengkap dengan tombol. Jika Agan mengikuti langkah-langkahnya dengan saksama, maka harusnya fitur Dark Mode atau Mode Malam ini sudah bisa bekerja dengan baik pada blog Agan.

Jika fiturnya tidak aktif sesuai dengan yang diharapkan, misalnya warna tema tak berubah sebagaimana mestinya, maka perlu diketahui bahwa setiap template blog memiliki struktur yang berbeda-beda. Sehingga pengetahuan mengenai CSS sangat dibutuhkan agar blog benar-benar dapat mengaplikasikan fitur ini dengan sempurna.

Bagi Agan yang mengalami kendala, jangan sungkan untuk meninggalkan komentar sehingga Syams dapat membantu agar blog Agan dapat memakai fitur Dark Mode ini dengan baik, sehingga tutorial yang Agan ikuti sebelumnya tidak sia-sia.