Cara Membuat Night Mode di Blogger with Cookie

Night Mode adalah sebuah fitur yang bertujuan untuk membuat tampilan blog menjadi gelap. Fitur ini biasanya dapat kita temui pada perangkat mobile yang menyematkan fungsi Night Mode atau Dark Mode yang memiliki manfaat yaitu menghemat penggunaan baterai.

Pada kesempatan kali ini Mas Awan akan berbagi tips tentang Cara Membuat Night Mode di Blogger. Di sini saya menambahkan fitur Cookie agar saat di refresh halaman yang sudah diaktifkan dengan Night Mode tidak akan kembali ke mode awal meskipun Anda sudah berganti halaman. Bagaimana, menarik bukan? Bagi yang tertarik memasang fitur Night Mode ini silakan ikuti langkah-langkah berikut ini.

Cara Membuat Night Mode di Blogger

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}

Jika sudah selesai mengedit semua yang dibutuhkan, klik tombol Simpan tema dan lihat hasilnya.

Demikian artikel tentang Cara Membuat Night Mode di Blogger with Cookie, semoga bermanfaat. Sampai jumpa pada artikel selanjutnya.