Cara Menambahkan Mode Gelap di Web Blogger
Jadi yang dipostingan ini
ada perbedaan sedikit dari yang lainnya dimana mode gelap ini dilengkapi dengan
cookie /cache browser agar ketika halaman itu di refresh tidak akan kembali ke
mode awal atau mode terang walaupun sobat sudah buka halaman yang lainnya. Disitulah
letak perbedaannya dengan yang lainnya, bagi sobat yang tertarik ingin
menambahkan fitur night mode seperti itu bisa sobat langsung terapkan di
website / blogger sobat dengan cara-cara dibawah ini.
Cara Mudah Membuat Mode Gelap di Blogger
Berikut langkah-langkahnya
untuk membuat mode gelap pada blogger :
1. Buka
halaman blogger > Pilih tema > klik edit HTML
Tambahkan kode dibawah ini sebelum kode </body>
Berikut scriptnya :
<div class='Switchbtn'>
<span class='nightly'>Night Mode</span> <input class='togglenight togglenight-switch' id='nightmode' type='checkbox'/>
<label class='togglenight-btn' for='nightmode'/></div>
<script type='text/javascript'>
//<![CDATA[
// Night Mode
$("#nightmode").click(function(){$("body").toggleClass("nightmode")}),$("body").toggleClass(localStorage.toggled),$("#nightmode").click(function(){"nightmode"!=localStorage.toggled?($("body").toggleClass("nightmode",!0),localStorage.toggled="nightmode"):($("body").toggleClass("nightmode",!1),localStorage.toggled="")});
//]]>
</script>
2. Setelah
itu cara kedua sobat tambahkan kode CSS ini sebelum kode </head>
Berikut
Scriptnya :
3. Pahami
kode yang ditandai, kode itu adalah contoh kode yang bisa sobat edit dan ganti .class-baru
dengan
class / ID di sesuai dengan template blogger yang sobat pakai. Setelah itu silakan
tambahkan .nightmode sebelum
class atau ID dari bagian template yang ingin sobat rubah pada saat .nightmode
aktif.
Contohnya seperti ini :
4. Selain
itu langkah ke 4 yaitu Edit juga kode CSS ini untuk menentukan posisi dari
tombol night modenya :
Berikut scriptnya :
5. Langkah
terakhir jika sudah selesai di edit semua yang dibutuhkan, klik tombol simpan
tema. Selesai semoga berhasil
Jadi begitulah Cara Menambahkan Mode Gelap di Web Blogger yang terbaru dengan fitur cookie semoga bermanfaat dan berguna bagi sobat semuanya. Terimakasih
#caramembuatmodegelap
#modegelapdiblogger
#tutorialmenambahkanmodegelap
#modegelap
#darkmode
#modegelapdiblogger
Tetap Terhubung Artikel Terupdate !