Cara Membuat Night Mode di Blogger Dengan Cookie

Cara Membuat Night Mode di Blogger Dengan Cookie

Snippet Tips Blogger

12.30

iNDZGN- Sudah bukan hal asing di masa sekarang, jika kebanyakan smartphone maupun website atau blogger menggunakan Night Mode. Pada smartphone sendiri Night Mode menjadi pilihan yang paling banyak digemari, hal itu dikarenakan mengurangi daya pemakaian dari baterai sehingga dapat menghemat pemakaian battery tersebut.

Pada blogger sendiri, Night Mode merupakan sebuah fitur yang memiliki fungsi untuk membuat tampilan menjadi gelap. Seperti yang sudah saya jelaskan di atas fungsi dari Night mode ini juga ketika kamu membuka sebuah blog  pada smartphone kamu dengan adanya fitur Night Mode, bisa menghemat penggunaan baterai.

Di dalam artikel ini, saya akan berbagi tips mengenai Cara Membuat Night Mode di Blogger Dengan Cookie. Saya menambahkan fitur Cookie guna ketika refresh halaman yang sudah diaktifkan dengan Night Mode tidak akan kembali ke mode awal meskipun kawan blogger sudah berganti halaman. Menarik bukan?

Ikuti pemasangan fitur Night Mode ini lewat langkah-langkah di bawah ini.

Cara Membuat Night Mode di Blogger Dengan Cookie

Langkah pertama buka halaman Blogger > Klik menu Tema kemudain klik tombol Edit HTML > 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>

Lalu tambahkan kode CSS di bawah 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>

Perhatikan kode yang sudah ditandai. Kode tersebut adalah contoh kode yang bisa kawan blogger edit dengan mengganti .class-baru dengan class atau ID di dalam bagian tertentu template kamu. Silahkan tambahkan .nightmode sebelum class atau ID dari bagian template yang ingin kamu ubah ketika Night Mode aktif.

Contohnya seperti di bawah ini.

.nightmode .header{background:#222}
.nightmode .title{color:#fff}
dst...

Edit juga CSS di bawah 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 sudah selesai semua, klik tombol Simpan tema dan lihat hasilnya di blog kawan blogger.

Sekian artikel kali ini mengenai Cara Membuat Night Mode di Blogger Dengan Cookie. Semoga bermanfaat, terimakasih.

Source: arlinacode.com

12.30