Cara Membuat Tampilan Night Mode di Blogger dengan Cookie

AdityaTekno.com - Cara Membuat Night Mode di Blogger dengan Cookie. Kali ini saya akan berbagi tutorial tentang cara membuat tombol night mode atau dark mode di Blogger dengan cookie.

Pada tutorial ini saya juga menambahkan fitur cookie, agar saat kita refresh halaman yang sudah diaktifkan dengan Night Mode tidak akan kembali ke mode awal meskipun sobat sudah berganti halaman. Menarik sekali bukan? Pasti anda tertarik?

Nah, bagi anda yang belum tau apa itu Night Mode, silahkah bisa baca sedikit penjelasan berikut ini. Night Mode adalah sebuah fitur yang dimaksudkan untuk membuat tampilan menjadi gelap (dark mode). Fitur ini biasanya kita temui pada perangkat mobile yang menyematkan fungsi Night Mode atau Dark Mode yang memiliki manfaat yaitu menghemat penggunaan baterai.

Bagi yang tertarik memasang fitur Night Mode ini silakan ikuti langkah-langkah di bawah ini.

Cara Membuat Night Mode di Blogger dengan Cookie

Seperti biasa, pertama buka Blogger >> Tema >> 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 letakkan 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>

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

.nightmode .header{background:#222}

.nightmode .title{color:#fff}

.nightmode .footer{background:#111}
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 Simpan Tema dan lihat hasilnya.

Baca Juga: Cara Membuat Syntax Highlighter di Postingan Blog

Untuk melihat contoh dari penerapan fitur Night Mode di Blogger, silahkah hlik tombol di bawah ini. Klik tombol Night Mode yang posisinya berada di pojok kanan atas.