Dark Mode / Night Mode / Mode Malam / Mode Gelap adalah tombol yang bisa mengubah tampilan lebih gelap pada layar. Hal ini tentu saja membuat mata pembaca tak mudah lelah saat mengunjungi atau membaca artikel blog yang panjang.
Untuk membuat tombol Dark Mode pada blog tidaklah rumit,
1. Buka Akun Blogger >> Pilih Tema >> kemudian Edit HTML
2. Pastikan bahwa template sudah terpasang kode dibawah ini (gunakan versi. 3.3.1 atau diatasnya):
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>Jika belum pastekan diatas kode </head>
3. Copy kode dibawah ini, diatas </body>
<style>
/* Toggle Night Mode Winfoku */
.Switchbtn{text-align:center;display:inline-block;align-items:center;margin-top:0px;margin-right:0px;padding:0px}
.tgl2{display:none;}
.tgl2 + .tgl2-btn{outline:0;display:inline-block;width:50px;height:10px;position:relative;cursor:pointer;margin-left:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.tgl2 + .tgl2-btn:after,.tgl2 + .tgl2-btn:before{position:relative;display:block;content:"";width:50%;height:100%;}
.tgl2-switch + .tgl2-btn{background:#D0D0D0;border-radius:100px;transition:all .4s ease;}
.tgl2-switch + .tgl2-btn:after{content:"\f185";font-family:fontawesome;border-radius:100px;background:#979797;transition:left 0.3s cubic-bezier(0.175,0.885,0.32,1.275),padding 0.3s ease,margin 0.3s ease;box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 4px 0 rgba(0,0,0,0.08);position:absolute;width:20px;height:20px;top:-5px;left:0;}
.tgl2-switch:checked + .tgl2-btn{background:#205A95;}
.tgl2:checked + .tgl2-btn:after{left:50%;background:#123456;content:"\f186";font-family:fontawesome}
.Winfoku {background:#0c0a0a !important}
.Winfoku .post {background:#0c0a0a !important}
.Winfoku .post-body {color:white !important}
.Winfoku .post-title{color:white !important}
.Winfoku .classbaru{}
.Winfoku .classbaru{}
</style>
<script>//<![CDATA[
$("#Winfoku").click(function(){
$("body").toggleClass('Winfoku');
});
//]]></script>Lalu Simpan Tema.
4. Pilih atau Buka Tata Letak, Kemudian Tambahkan Gadget HTML/JavaScript (Letaknya dimana saja sesuai keinginan) Copy dan Pastekan Kode dibawah ini, lalu Simpan.
<div class='Switchbtn' style='float:right;background:#3498db'>
<span style='font-size:8px'/> <input class='tgl2 tgl2-switch' id='Winfoku' type='checkbox'/>
<label class='tgl2-btn' for='Winfoku'/></div>Lihat Blog dan tes Tombol Dark Mode untuk mengetahui perubahan pada blog.
DEMO:
EmoticonEmoticon