Cara Mudah Membuat Night Mode di Blogger dengan Cookie Di Blogger

Night mode merupakan sebuah fitur yang berguna untuk mengubah tampilan blog atau website menjadi gelap. Night mode dapat mempercantik blog dan juga dapat mengurangi kecerahan layar gawai yang digunakan sehingga tidak membuat mata menjadi silau. Night mode sebenarnya sudah dikenal cukup lama akan tetapi baru mulai ramai lagi akhir ini ini. Banyak bloger yang menambahkan fitur nigth mode ini didalam blog mereka.

Cara membuat night mode pada blogger tidak begitu sulit. Kali ini saya akan memberikan tutorial untuk membuat night mode atau mode malam pada blogger sobat. Pada tutorial ini saya melihat dari salah satu pembuat template blog panutan saya yaitu " arlinadzgn " yang bisa kamu lihat di blognya " arlinadzgn.com ". Tidak usah lama-lama lagi, mari kita mulai tutorial untuk membuat night mode atau mode malam pada blogger ini.

Cara Mudah Membuat Night Mode di Blogger dengan Cookie Di Blogger

Dalam tutorial ini saya menggunakan blog dengan bahasa inggris, silahkan sesuaikan dengan bahasa yang kamu gunakan.

1. Buka halaman blog kamu, jika sudah masuk didalam dashboard klik menu theme

2. cari kode </body>, untuk lebih cepat gunakan fitur find dengan menekan Ctrl+F secara bersamaan.

3. Pastekan kode berikut tepat diatas 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>

4. setelah itu cari kode </head>, kemudian paste kode berikut tepat sebelum kode tersebut

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

5. Didalam kode tersebut terdapat .nightmode .class_baru{} , lihat tiga baris paling bawah.
Kamu bisa mengganti kode .class_baru dengan class atau ID yang kamu mau dan mengganti warna sesuai keinginan kamu. Lihat contoh dibawah :

.nightmode .header{background:#222}

.nightmode .title{color:#fff}

atau yang lainnya.

6. Lihat kode CSS dibawah ini. Kode inilah yang menentukan letak dan posisi switch button Night Mode berada. Edit sesuai keinginan kamu agar posisi sesuai dengan template.

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

7. Jika sudah meletakkan switch button dengan benar silahkan lakukan save template, kemudian lihat blog kamu. Kalau pemasangan switch button sudah benar, switch button akan terlihat diposisi yang kamu tentukan. Silahkan coba fitur tersebut.

8. Selesai

Tidak sulit bukan  Membuat Night Mode di Blogger dengan Cookie Di Blogger. Kamu bisa membuatnya dibanyak blog yang kamu kelola.

Baca juga