Membuat Fitur Night Mode di Blogger Memakai Cookie

Officekuy    12/23/2019    Blogger   

Sebenarnya night mode sendiri merupakan sebuah fitur yang bisa kita pakai untuk membuat layar smartphone atau pc kita menjadi gelap khususnya pada web browser, fitur night mode biasanya kita temui di perangkat smartphone yang bertujuan untuk menghemat daya.

Nah pada tutorial kali ini Tresnadev akan memberikan sebuah tips bagaimana cara kita membuat fitur night mode pada blog yang kita kelola, dan di tutorial ini kita akan menggunakan Cookie agar ketika kita berganti halaman, blog yang kita kunjungi akan mengingat setingan kita sehingga halaman akan selalu dalam keadaan night mode walaupun berganti puluhan halaman.

Nah gimana cukup menarik bukan, jadi bagi kamu yan ingin mencoba mengimplementasikan fitur night mode di blog kamu, silahkan ikuti tutorial ini step by step dan jangan sampai terlewat satu step pun.

Cara Membuat Night Mode di Blogger Menggunakan Cookie

Untuk langkah pertama hal yang harus kamu lakukan ialah buka halaman Blogger > Lalu klik Menu Tema dan pilih Edit HTML > Jika sudah silahkan kamu tambahkan kode di bawah 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 silahkan kamu tambahkan juga 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>

Setelah itu coba kamu perhatikan kode yang saya tandai di atas adalah contoh dari kode yang bisa kamu edit dan mengganti .class-baru menjadi class ataupun ID di dalam bagian tertentu pada template yang kamu miliki.

Lalu langkah selanjutnya ialah tambahkan .nightmode sebelum class atau ID dari bagian template yang ingin kamu ubah disaat fitur Night Mode aktif, sebagai contoh silahkan kamu lihat script di bawah ini.

.nightmode .header{background:#222}

.nightmode .title{color:#fff}

dst...

Lalu kamu edit juga pada bagian kode CSS ini untuk menentukan dimanakah letak tombole night mode.

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

Jika sudah silahkan kalian lihat tombol simpan thema dan kamu bisa melihat hasilnya seperti yang ada pada blog Tresnadev saya ini.