Tutorial Cara Membuat Night Mode di Blogger dengan Cookie
Night Mode adalah sebuah fitur yang bertujuan untuk membuat tampilan menjadi gelap. Fitur ini biasanya kita temui pada perangkat mobile yang menyematkan fungsi Night Mode atau Dark Mode yang memiliki manfaat yaitu menghemat penggunaan baterai.
Di sini Arlina Design akan berbagi tips tentang Cara Membuat Night Mode di Blogger dengan Cookie. Di sini saya menambahkan fitur Cookie agar saat kita refresh halaman yang sudah diaktifkan dengan Night Mode tidak akan kembali ke mode awal meskipun sobat sudah berganti halaman. Bagaimana, menarik bukan? Bagi yang tertarik memasang fitur Night Mode ini silakan ikuti langkah-langkah di bawah ini.
Cara Membuat Night Mode di Blogger dengan Cookie
Pertama buka 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 */
.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>Perhatikan kode yang ditandai, kode tersebut merupakan contoh kode yang bisa sobat edit dengan mengganti .class-baru dengan class atau ID di dalam bagian tertentu template sobat. Silakan 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 sudah selesai mengedit semua yang dibutuhkan, klik tombol Simpan tema dan lihat hasilnya di blog sobat.
Klik tombol di bawah ini untuk melihat contoh dari penerapan fitur Night Mode di Blogger. Klik tombol Night Mode yang posisinya berada di pojok kanan atas.
Lunar Responsive Blogger Template
Nah, bagi sobat yang tertarik dengan template yang digunakan pada percobaan Night Mode di atas. Berikut ini Lunar Responsive Blogger Template bisa sobat download di sini :
Untuk fitur-fitur pada template Lunar seperti yang sobat lihat di halaman Result. Jadi tidak perlu menanyakan hal yang tidak ada, contohnya "Kok tidak ada sidebarnya? Kok tidak ada kolom komentarnya? Kok ini, kok itu..." Oke!
Sekian dari Arlina Design untuk postingan kali ini tentang Cara Membuat Night Mode di Blogger dengan Cookie. Semoga bermanfaat dan wassalam.