Cara Membuat Mode malam di Blogger dengan Cookie

TRyanweb - Mode malam atau bisa juga di sebut dengan Night Mode adalah fungsi yang bertujuan untuk menggelapkan layar. Fungsi ini umumnya ditemukan pada perangkat seluler yang mengintegrasikan fungsi Mode Malam atau Mode Gelap yang memiliki keuntungan menghemat penggunaan baterai.

Di sini, saya akan berbagi kiat tentang cara membuat mode malam di Blogger dengan cookie. Di sini, saya menambahkan fungsi Cookie sehingga ketika Anda memperbarui halaman yang telah diaktifkan dengan mode malam, itu tidak akan kembali ke mode awal bahkan jika itu telah mengubah halaman. Bukankah ini menarik? Bagi Anda yang ingin menginstal fungsi Mode Malam, ikuti langkah-langkah di bawah ini.

Cara Membuat Mode Malam di Blogger dengan Cookie

Pertama buka halaman Blogger > Klik menu Tema dan klik tombol 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>

Perhatikan kode yang ditandai, kode tersebut merupakan contoh kode yang bisa Anda edit dengan mengganti .class-baru dengan class atau ID di dalam bagian tertentu template Anda. Silakan tambahkan .nightmode sebelum class atau ID dari bagian template yang ingin Anda ubah pada saat Night Mode aktif. Contohnya seperti ini :

.nightmode .header{background:#222}

.nightmode .title{color:#fff}

dst...

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}

Ketika Anda selesai mengedit semua yang Anda butuhkan, klik tombol Simpan Tema dan lihat hasilnya di blog Anda.

Klik tombol di bawah ini untuk melihat contoh penerapan Mode Malam di Blogger. Klik tombol Night Mode, posisi yang ada di sudut kanan atas.