Cara Menampilkan Tampilan Night Mode di Blogpsot Dengan Cookie

cara membuat night mode di blogspot, night mode on blogspot,

 


Cara Menampilkan Tampilan Night Mode di Blogpsot Dengan Cookie - Pembahasan kali ini ialah cara membut mode night di blogspot dengan menggunakan cookie, nah cookie ini berfungsi agar ketika halaman web atau blog tersebut di refresh maka tidak akan kembalai ke halaman beranda atau halaman awal web tersebut.

Dengan menggunakan fitur darkmode ini di blog, tenttunya akan memudahkan kembaca ketika membuka blog kamu di tempat yang gelap, sehingga pengaturan pencahayaannya dapat di lakukan dedngan mudah serta tidak membuat mata sakit. Untuk menerapkan tutorial ini, silahkan ikuti langkah-langkah di bawah ini.

Pertama silahkan masuk ke bagian Thema >> Edit HTML dan tambahkan kode berikut 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 tambahkan juga kode CSS berikut ke dalam </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>
Pada tampilan kode di atas, ada beberapa kode yang telah admin warnai dengan latar biru yaitu .nightmode .class-baru{} ganti kode night tersebut dengan dengan code di bawah ini pada template tertentu. Silakan tambahkan .nightmode sebelum class atau ID dari bagian template yang ingin anda ubah pada saat Night Mode aktif.

.nightmode .header{background:#222}

.nightmode .title{color:#fff}

.nightmode .footer{background:#111}
dst...
Kemdian untuk menetukan letak posisi tombol night mode, edit juga kode css nya 
.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}
Jika semuanya telah kamu edit, save dan restart link blog kamu