Cara Membuat Night Mode di Blogger dengan Cookie

Cara Membuat Night Mode di Blogger dengan Cookie - Atas Programer

Hallo sobat Atas Programer, kembali lagi sama saya admin Atas Programer di artikel kali ini saya akan mengasih tau kalian bagaimana cara membuat night mode atau mode malam. Sebelum kita lanjut saya akan sedikit menjelaskan apa itu night mode atau mode malam

Night mode atau mode malam adalah sebuah fitur yang bertujuan untuk membuat menjadi gelap pada website atau blog. Fitur ini biasanya kita temui pada perangkat mobile yang menyematkan fungsi night mode atau mode malam, yang memiliki manfaat yaitu. Menghemat penggunaan baterai ponsel / laptop.


Di artikel Atas Programer kali ini akan berbagi tips tentang cara membuat night mode atau model malam / dark mode di blogger dengan cookie agar saat kita refresh halaman yang sudah diaktifkan dengan night mode atau dark mode tidak akan kembali ke mode awal meskipun sobat sudah berganti halaman. Bagaimana, menarik bukan sobat Atas Programer? Bagi yang tertarik memasang fitur night mode / dark mode ini silahkan ikuti langkah-langkah dibawah ini

Cara membuat night mode di blogger dengan cookie


Pertama-tama silahkan kalian buka blogger.com > masuk ke menu tema / themes > dan klik tombol edit HTML > 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>

Jika sudah. Kemudian kalian tambahkan kode css ini tepat sebelum </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{}

Perhatikan kode yang di tandai, kode tersebut merupakan contoh kode yang bisa sobat Atas Programer edit dengan mengganti .class-baru dengan class atau id di dalam bagian tertentu template sobat. Silahkan sobat tambahkan .nightmode sebelum class atau id dari bagian template yang ingin sobat 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 sobat sudah selesai mengedit semua yang dibutuhkan. Klik tombol simpan tema dan lihat hasilnya di blog sobat

Bagikan Artikel ini Melalui