Skip to main content

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 saya 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 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

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar