Cara Membuat Dark Mode With Cookie di Blog

Malestea
Malestea
Cara Membuat Dark Mode With Cookie di Blog

Update artikel lagi nih :3 kali ini saya rajin amat update post tiap hari yah :v padahal mah main terjadwal aja sih :/ so pada tutorial kali ini saya akan membuat Dark Mode pada website or blog kalian sehingga membuat web or blog menjadi lebih interative lagi.

Disini saya memanfaatkan localStorage dari browser sehingga tidak terhalang expired dari cookie sendiri dan kodenya juga simple karena saya buat sendiri berdasarkan kemampuan :v

Cara Membuat Dark Mode With Cookie


Pertama buka Blog > klik Tema > klik Edit HTML

Kedua tambahkan kode berikut tepat diatas kode </body>
<script>//<[CDATA[
$('body').toggleClass(localStorage.toggled);
$('#noticeme').click(function(){
  if(localStorage.toggled != 'darkmode'){
     $('body').toggleClass('darkmode', true)
    localStorage.toggled = 'darkmode';
     }else{
    $('body').toggleClass('darkmode', false)
       localStorage.toggled =''
  }
})//]]>
</script>
Ketiga kita buat kode pemanggil js tersebut, tambahkan kode dibawah sesuai kalian mau dimana
body.darkmode {
  background: #0c0029;
}
Selanjutnya buat bagian mana yang akan dijadikan Dark Mode nya
<div id='noticeme'> Click me senpai !!</div>
Terakhir simpan dan lihat tampilan nya

Bagi kalian yang ingin melihat hasilnya klik tombol berikut


Bagi kalian yang punya cara lain bisa berkomentar untuk berdiskusi
Jangan takut berkreasi sendiri biar lebih paham lagi kodenya :D

1 comment : Cara Membuat Dark Mode With Cookie di Blog

  1. ndisaen.com
    Cak mana ni demo dan tutorial beda pengaplikasiannya