Cara Menambahkan Mode Gelap di Web Blogger

Jumpa kembali sobat blogger kali ini admin duniamu38.com akan berbagi tutorial seputar blogging, yaitu Cara membuat night mode / mode gelap di Blogger yang merupakan sebuah fitur menarik ataupun kekinian untuk mempercanti sebuah blog maupun website yang bertujuan untuk merubah suatu tampilan website atau blog menjadi tampilan gelap/mode gelap. Fitur mode gelap seperti ini biasanya sering kita jumpai pada sebuah perangkat seperti handphone ataupun mobile dimana fungsi dari night mode ini sangat bagus untuk sebuah tampilan di website yang mana memiliki banyak manfaat misalnya seperi penghematan baterai, membuat tampilan tidak silau dimata, dan mempercantik sebuah tampilan web/blog.

Jadi yang dipostingan ini ada perbedaan sedikit dari yang lainnya dimana mode gelap ini dilengkapi dengan cookie /cache browser agar ketika halaman itu di refresh tidak akan kembali ke mode awal atau mode terang walaupun sobat sudah buka halaman yang lainnya. Disitulah letak perbedaannya dengan yang lainnya, bagi sobat yang tertarik ingin menambahkan fitur night mode seperti itu bisa sobat langsung terapkan di website / blogger sobat dengan cara-cara dibawah ini.

Cara Mudah Membuat Mode Gelap di Blogger

Berikut langkah-langkahnya untuk membuat mode gelap pada blogger :

1. Buka halaman blogger > Pilih tema > klik edit HTML

Tambahkan kode dibawah ini sebelum kode </body>

Berikut scriptnya :

<span class='nightly'>Night Mode</span> <input class='togglenight togglenight-switch' id='nightmode' type='checkbox'/>

//<![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. Setelah itu cara kedua sobat tambahkan kode CSS ini sebelum kode </head>

Berikut Scriptnya :

/* 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{}

</style>

3. Pahami kode yang ditandai, kode itu adalah contoh kode yang bisa sobat edit dan ganti .class-baru dengan class / ID di sesuai dengan template blogger yang sobat pakai. Setelah itu silakan tambahkan .nightmode sebelum class atau ID dari bagian template yang ingin sobat rubah pada saat .nightmode aktif.

Contohnya seperti ini :

.nightmode .header{background:#222}

.nightmode .title{color:#fff}

dst...

4. Selain itu langkah ke 4 yaitu Edit juga kode CSS ini untuk menentukan posisi dari tombol night modenya :

Berikut scriptnya :

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

5. Langkah terakhir jika sudah selesai di edit semua yang dibutuhkan, klik tombol simpan tema. Selesai semoga berhasil

Jadi begitulah Cara Menambahkan Mode Gelap di Web Blogger yang terbaru dengan fitur cookie semoga bermanfaat dan berguna bagi sobat semuanya. Terimakasih

#caramembuatmodegelap

#modegelapdiblogger

#tutorialmenambahkanmodegelap

#modegelap

#darkmode

#modegelapdiblogger