Cara Menambahkan Mode Malam Dan Cookie Di Blog

Cara Menambahkan Mode Malam Dan Cookie Di Blog

Pada Kesempatan Kali Ini Cybertips akan berbagi tips yaitu cara menambahkan fitur mode malam di blog dengan cookie
Night Mode atau (mode malam) merupakan fitur yang bertujuan untuk membuat tampilan menjadi gelap. Fitur ini biasanya terdapat pada perangkat mobile yang menyematkan fungsi Night Mode atau Mode Gelap yang memiliki keuntungan menghemat penggunaan baterai. Disini saya menambahkan fitur Cookie agar ketika kita me-refresh halaman yang sudah diaktifkan dengan Night Mode tidak akan kembali ke mode awal walaupun anda sudah berganti halaman. Menarik sekali bukan? Bagi yang tertarik menginstal fitur Night Mode, silahkan ikuti langkah-langkah di bawah ini.
Pertama masuk ke halaman Blogger> Klik Menu Tema dan Klik Tombol Edit HTML > Tambahkan kode 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 tambahkan kode CSS ini sebelum kode </head>


<style type='text/css'>
/* Night Mode  By Cybertips.my.id */
.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 di tandai, kode tersebut merupakan contoh kode yang bisa sobat edit dengan cara mengganti .class-baru dengan class atau ID di bagian tertentu template anda. Harap tambahkan .nightmode sebelum class atau ID dari bagian template yang ingin Anda ubah pada saat Night Mode aktif.
Contoh


.nightmode .header{background:#222}

.nightmode .title{color:#fff}

etc

Edit juga kode CSS ini untuk menentukan posisi tombol Mode Malam

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

Setelah Anda selesai mengedit semua yang Anda butuhkan, Klik Tombol Simpan Tema dan lihat hasilnya di blog Anda

Berkomentar Lah Dengan Sopan, Bijak Dan BerEtika, Karena Setiap Komentar Menjadi Tanggung Jawab Komentator

Post a Comment (0)
Previous Post Next Post