Membuat Night Mode Di Blog Dengan Mudah – Night Mode merupakan sebuah fitur untuk merubah tampilan blog menjadi gelap. Fitur ini biasanya kita jumpai pada perangkat mobile yang menyematkan kode Night Mode atau Dark Mode yang memiliki tujuan menghemat pemakaian baterai.

Di sini Maskalem akan membagikan tutorial untuk membuat fitur Night Mode atau Dark Mode di blogger dengan menggunakan Cookie. Saya menambahkan fitur Cookie agar nantinya pada saat halaman di refresh tidak kembali ke mode awal meskipun kalian sudah berganti halaman.

Bagaimana, menarik bukan? Bagi kalian yang tertarik untuk memasang fitur Night Mode di blog, silahkan ikuti langkah-langkah Membuat Night Mode Di Blog Dengan Mudah di bawah ini.

Membuat Night Mode Di Blog Dengan Mudah

Pertama, silahkan kalian ke Dashboard blogger klik menu Tema dan klik tombol Edit HTML tambahkan kode di bawah ini tepat di atas </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 di atas </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 saya tandai, kode tersebut merupakan kode yang bisa kalian edit dengan mengganti kode .class-baru dengan class atau ID yang terdapat di bagian tertentu template kalian. Silahkan kalian tambahkan kode .nightmode sebelum class atau ID dari bagian tertentu template yang ingin kalian ubah ke Night Mode. Misalnya seperti di bawah ini.

.nightmode .header{background:#222}

.nightmode .title{color:#fff}

dst...

Jika kalian ingin merubah posisi tombol Night Mode silahkan edit kode CSS di bawah ini.

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

Jika sudah selesai mengedit bagian yang kalian inginkan , klik tombol Simpan Tema dan lihat hasilnya di blog kalian.

Demikian artikel mengenai bagaimana cara untuk Membuat Night Mode Di Blog Mudah, semoga bermanfaat terima kasih.

Sumber: arlinadzgn