Cara Membuat Tombol Dark Mode, Night Mode di Blogger Dengan Mudah

Cara Membuat Tombol Dark Mode, Mode Gelap di Blog Dengan Mudah | pada kesempatan kali ini admin akan share tutorial cara untuk membuat tombol switch mode gelap atau dark mode di blogger.

Tombol dark mode di blogger ini berfungsi untuk menyalakan mode gelap atau mematikannya kembali, sehingga visitor blog sobat dapat memilih tampilan sesuai dengan kenyamanan mereka.

Apakah mereka akan menggunakan tampilan biasa atau mereka juga bisa memilih untuk menyalakan fitur dark mode yang sudah kita sediakan.

Dengan membuat fitur tombol switch mode gelap atau dark mode pada blogger, tentunya dapat membuat visitor lebih nyaman dengan tampilan blog kita sob.

Selain daripada itu, fitur mode gelap pada sebuah website dapat menghemat daya baterai jika diakses melalui smartphone.

Seperti yang kita ketahui, hampir seluruh layanan digital saat ini sudah memiliki night mode atau modus malam, tidak ada salahnya jika kita juga memasang fitur modus gelap pada blog kita masing-masing.

Fitur dark mode yang akan kita buat pada kesempatan kali ini, lengkap dengan tombol switch nya ya sob, artinya tombol night mode di blog ini bisa di nyalakan dan bisa dimatikan sesuai dengan minat pengunjung.

Tombol mode gelap pada blogger ini juga dilengkapi dengan sistem chookies, dimana saat tombol dark mode dinyalakan, tidak akan kembali ke tampilan biasa meski halaman di refresh atau di reload.

Dengan bantuan chookies ini, akan membuat halaman blog tetap berada dalam mode gelap meski nanti halaman tersebut di close.

Untuk mempersingkat waktu, mari kita mulai cara membuat dan memasang tombol dark mode atau night mode di blogger dengan mudah dan simpel.

Cara membuat tombol switch dark mode di blogger

Untuk membuat fitur night mode di blogger, kita akan mengedit kode HTML yang ada di blog, silahkan ikuti langkah-langkahnya dengan teliti, silahkan backup terlebih dahulu template sobat sebelum melakukan tutorial ini.

Jaga-jaga saat nanti terjadi error sobat cukup merestore tempalate backup an sobat tadi.

Sudah dibackup?

yuk kita mulai...

1. Silahkan masuk pada blogger sobat Template ==> edit HTML.

Silahkan simpan kode CSS di template sobat.

/* Night Mode */
.nightly{color:#999;font-size:13px}
.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:999;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{}

2. Setelah CSS dark mode dipasang pada template, sekarang silahkan pasang juga kode dibawah ini pada bagian body template sobat.

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

3. Terakhir, silahkan save template sobat dan lihat hasilnya.

Menyesuaikan fitur dark mode, night mode, mode gelap

Disini ada beberapa hal yang harus sobat sesuaikan dengan template sobat masing-masing, karena pada setiap template memiliki stuktur kode yang berbeda.

Diantara yang harus disesuaikan tombol dark mode ini adalah sebagai berikut:

Posisi Tombol Switch Dark mode 

Sobat tidak perlu lagi bingun dimana posisi tombol dark mode ini harus dipasang, karena akan secara otomatis menyesuaikan.

Dan letak default tombol mode gelap ini ada disamping header

silahkan sesuaikan CSS berikut ini agar tampilannya pas dengan template sobat.

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

Tampilan dark mode

Selain tombol yang harus sobat sesauikan, disini juga sobat harus menyesuaikan warna tiap-tiap class atau ID markup pada template sobat, karena default kode CSS mode gelap ini hanya merubah backround wrapper dan warna link saja, sehingga yang lainnya harus sobat sesuaikan sendiri.

Caranya cukup mudah sob, sobat bisa inspect element terlebih dulu template sobat lalu cari ID atau class masing-masing lalu sesuaikan dengan cara menambahkan class aau ID baru pada CSS mode gelap diatas, atau seperti pada dibawah ini.

.nightmode #wrapper{background:#202124}
.nightmode .post-body{color:rgba(255,255,255,.7)!important}
.nightmode #header-container{background:#202124}

silahkan sobat sesuaikan dengan template sobat masing-masing..

Untuk melihat hasilnya sobat bisa klik demo template viomagz yang saya pasangkan kode dark mode diatas sob.

lihat hasilnya


Nah, itu dia sob cara membuat fitur switch dark mode, night mode atau mode gelap pada blogger, gampang kan?

selamat mencoba, jika ada yang  masih belum dipahamin, silahkan tuliskan di kolom komentar, nanti saya bantu.

demikian artikel kali ini, selamat mencoba..


Source code: https://www.arlinadzgn.com/2019/10/cara-membuat-night-mode-di-blogger.html