Cara Membuat Tombol Mode Gelap / Modus Malam pada Blog versi Kurazone

KURAZONE ~ Halo sahabat Kurazer, pada kesempatan kali ini kita akan belajar mengenai "Cara Membuat Tombol Mode Gelap / Modus Malam (Dark Mode) pada Blog versi Kurazone". Fungsi dari tombol Modus Malam ini adalah mengubah warna template yang awalnya terang menjadi gelap.

Langsung to the point saja...
1. Buka akun Blogger >> Pilih Tema >> Pilih Edit HTML
2. Copy kode CSS dan Query dibawah ini, letakkan diatas kode </body>
<style>
/* Toggle Night Mode Kurapetang */
.Switchbtn{text-align:center;display:inline-block;align-items:center;margin-top:3px;padding:9px}
.tgl2{display:none;}
.tgl2 + .tgl2-btn{outline:0;display:inline-block;width:40px;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}
.Kurapetang {background:#0c0a0a !important}
.Kurapetang .post {background:#0c0a0a !important}
.Kurapetang .post-body {color:white !important}
.Kurapetang .post-title{color:white !important}
.Kurapetang .classbaru{}
.Kurapetang .classbaru{}
</style>
<script>//<![CDATA[
$("#Kurapetang").click(function(){
$("body").toggleClass('Kurapetang');
});
//]]></script>

3. Copy kode HTML dibawah ini, letakkan di tempat yang kalian inginkan (peletakan kode bebas sesuai selera)
<div class='Switchbtn' style='float:right;background:#1e1e20'>
<span style='font-size:8px'><i>Modus malam</i></span> <input class='tgl2 tgl2-switch' id='Kurapetang' type='checkbox'/>
<label class='tgl2-btn' for='Kurapetang'/></div>

4. Simpan template

Note :
  1. Ubah float:right menjadi float:left apabila kalian ingin meletakkan tombol nya berada dibagian kiri
  2. Keterangan .Kurapetang .classbaru {} adalah untuk menambah bagian yang ingin dijadikan warna gelap. Silahkan ganti .classbaru {} nya menjadi nama selektor yang kalian ingin ubah warnanya. Contoh, jika ingin membuat HEADER dan SIDEBARNYA menjadi gelap, maka >> .Kurapetang .header{background:black} atau .Kurapetang .sidebar {background:black}. Jangan lupa untuk menambahkan color:white agar teks yang berada pada area gelap menjadi warna putih >> .Kurapetang .sidebar{background:black;color:white}
  3. Sisanya bisa kalian explore sendiri

Pastikan bahwa template kalian sudah terpasang kode Jquery seperti dibawah ini (gunakan ver. 3.3.1 atau versi diatasnya):
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

Itulah informasi mengenai "Cara Membuat Tombol Mode Gelap / Modus Malam (Dark Mode) pada Blog versi Kurazone", selamat mencoba dan semoga bermanfaat. Goodluck !!





Lebih baru Lebih lama