Cara Membuat Tampilan Night Mode di Blogger dengan Cookie
Arsipbiru.com - Pada tutorial kali ini, saya akan membagikan sedikit tutorial terkait bagaimana cara membuat tampilan Night Mode di Blogger dengan cookie. Sebelum itu, tahukah Anda apa itu Night Mode? Night Mode adalah sebuah fitur yang bertujuan untuk mengubah tampilan menjadi gelap. Fitur ini biasanya ditemui pada perangkat mobile yang menyematkan fungsi Night Mode atau Dark Mode yang memiliki manfaat, yakni menghemat penggunaan baterai.
Untuk memasang fitur Night Mode di Blogger terbilang cukup mudah. Anda tinggal mengikuti langkah-langkahnya dengan cermat. Pemasangan fitur Night Mode di Blogger kali ini disertai dengan cookie. Fungsi cookie sendiri disini adalah ketika kita membuka blog atau website yang sama, kita tidak perlu repot-repot mengubahnya ke Night Mode dari awal. Begitu pula sebaliknya.
Keren, bukan? Tentu saja sangat keren. Nah, bagi Anda yang tertarik untuk memasang fitur Night Mode ini, silahkan ikuti langkah-langkahnya berikut ini.
Cara Membuat Tampilan Night Mode di Blogger dengan Cookie
Berikut langkah-langkah untuk memasang fitur Night Mode di Blogger dengan cookie.
1. Pertama, masuk ke Blogger > pilih Tema > Edit HTML > Tambahkan kode berikut 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>
2. Kemudian letakkan kode CSS berikut 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:"";width:50%;height:100%}
.togglenight-switch + .togglenight-btn{background:#d5d2fc;border-radius:99em;transition:all .4s ease}
.togglenight-switch + .togglenight-btn:after{content:'';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:'';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>3. Lalu perhatikan kode ".nightmode .class-baru{}". Kode tersebut merupakan contoh kode yang bisa Anda edit dengan mengganti .class-baru dengan class atau ID di dalam bagian tertentu pada template Anda. Silahkan tambahkan .nightmode sebelum class atau ID dari bagian template yang ingin Anda ubah pada saat Night Mode aktif. Misalnya, seperti ini:
.nightmode .header{background:#222}
.nightmode .title{color:#fff}
.nightmode .footer{background:#111}
dst...
4. Edit juga kode CSS berikut 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}
5. Jika sudah selesai menambahkan dan mengedit semua yang dibutuhkan, klik Simpan Tema dan lihat hasilnya.
Demikian tutorial bagaimana cara membuat tampilan Night Mode di Blogger dengan cookie. Semoga bermanfaat.
Sumber:
Posting Komentar