Cara Membuat Night Mode di Blogger dengan Cookie

Night Mode : Adalah ciri yang bertujuan untuk menjadikan paparan gelap. Ciri ini biasanya ditemui pada peranti mudah alih yang memadankan Mod Malam atau Fungsi Mod Gelap yang mempunyai manfaat untuk menjimatkan penggunaan bateri


Di sini O4U akan berkongsi petua tentang Cara Membuat Mod Malam di Blogger dengan Cookies. Di sini saya menambah ciri Cookie supaya apabila kita menyegarkan halaman yang telah diaktifkan dengan Mod Malam, ia tidak akan kembali ke mod awal walaupun anda telah mengubah halaman. Bagaimana, menarik bukan? Bagi mereka yang berminat memasang ciri Mod Malam, sila ikuti langkah-langkah di bawah.

Cara Membuat Night Mode di Blogger dengan Cookie

Pertama buka halaman Blogger > Klik menu Tema dan klik Butang Edit HTML > Tambahkan kode ini sebelum kode </body>

<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>

Kemudian tambahkan kode CSS ini sebelum kode </head>

<style type='text/css'>
/* Night Mode */
.nightly{color:#999;font-size:13px}
.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}
.togglenight{display:none;}
.togglenight + .togglenight-btn{outline:0;display:inline-block;width:45px;height:10px;position:relative;cursor:pointer;margin-left:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.togglenight + .togglenight-btn:after,.togglenight + .togglenight-btn:before{position:relative;display:block;content:&quot;&quot;;width:50%;height:100%}
.togglenight-switch + .togglenight-btn{background:#d5d2fc;border-radius:99em;transition:all .4s ease}
.togglenight-switch + .togglenight-btn:after{content:&#39;&#39;;border-radius:100px;background:#887fff;transition:left 0.3s cubic-bezier(0.175,0.885,0.32,1.275),padding 0.3s ease,margin 0.3s ease;position:absolute;width:20px;height:20px;top:-5px;left:0;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}
.togglenight-switch:checked + .togglenight-btn{background:rgba(255,255,255,.15)}
.togglenight:checked + .togglenight-btn:after{content:&#39;&#39;;left:55%;background:#ff9f43}
.nightmode{background:#202124;color:rgba(255,255,255,.7)}
.nightmode a{color:rgba(255,255,255,.7)!important}
.nightmode a:hover{color:rgba(255,255,255,.4)!important}
.nightmode .class-baru{}
.nightmode .class-baru{}
</style>

Beri perhatian kepada kod yang ditandakan, kod itu adalah contoh kod yang boleh anda edit dengan menggantikan yang baru. Kelas dengan kelas atau ID dalam seksyen tertentu pada templat anda. Sila tambah .nightmode sebelum kelas atau ID templat yang anda mahu tukar apabila Mod Malam aktif. Sebagai contoh seperti ini:

.nightmode .header{background:#222}

.nightmode .title{color:#fff}

Edit juga kode CSS ini untuk menentukan posisi dari tombol Night Mode

.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}

Jika sudah selesai mengedit semua yang dibutuhkan, klik Butang Simpan tema dan lihat hasilnya di blog Anda.

Demo
Untuk demo silakan semak nightmod yang ada di dalam blogf ini, ianya sangat sama,
Demikian posting saya tentang cara memasang nightmod ataupun mod malam di blogger, sekiranya ada kekurangan silakan tinggalkan comment anda di ruangan yang disediakan.