Cara Membuat Night / Dark Mode Di Blog Dengan Cookie

Cara Membuat Night / Dark Mode Di Blog Dengan Cookie - gacerindo, Awal mula adanya fitur dark mode atau night mode yaitu ketika mengakses situs menggunakan smartphone batrai biasanya akan cepat habis. Maka datanglah fitur penghemat baterai dan menampilkan sisi gelap ketika mengunjungi salah satu situs.

Selain itu adanya Night Mode atau Mode Malam ini sangat baik untuk penglihatan mata, karena warnanya berubah menjadi gelap. Biasanya akan menimbulkan sakit mata ketika kalian tidak mengaktikfan night mode karena warna layar smartphone yang begitu terang.

Pada kesempatan kali ini, saya akan sedikit memberikan tutorial bagi kalian yang ingin memasang Dark Mode atau Night Mode pada blog kalian. Tentunya ini demi kenyamanan visitor nantinya. Silahkan simak langkah-langkahnya dibawah.

CARA MEMBUAT DARK MODE / NIGHT MODE DI BLOG

1. Pertama masuk ke akun Blogger kalian

2. Pilih menu Tema kemudian pilih Edit HTML

3. Letakan 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>

4. Cari lagi kode </body> kemudian pastekan kode dibawah 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>

5. Simpan

Menambahkan Class Baru Dark Mode Blog

Diatas tadi terdapat kode Class yang bisa ditambahkan, seperti ini.

.nightmode .class-baru{}

.nightmode .class-baru{}

Silahkan gunakan kode Class Baru ini dibagian Class atau ID template kalian, misalnya apabila kalian ingin meletakan Night Mode dibagian header, maka letakanlah kode class ini sebelum ID header. Contohnya seperti ini.

.nightmode .header{background:#222}

.nightmode .title{color:#fff}

dst...

Note:

Jangan lupa juga untuk mengedit pada kode dibawah ini, untuk menentukan posisi tombol Night Mode pada blog kamu.

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

PENUTUP

Demi menjaga kenyamanan visitor ketika malam hari, maka sebaiknya tambahkanlah fitur Night Mode atau Dark Mode pada blog kalian. Kode dark mode ini menggunakan Cookie, jadi ketika kalian mengaktifkannya pertama kali, tidak perlu mengaktikannya kembali saat mengujungi halaman lainnya pada blog tersebut.

Itulah tutorial tentang Cara Membuat Night / Dark Mode di Blog Dengan Cookie. Selamat mencoba dan semoga bermanfaat.