Cara Menambah Fitur Dark Mode Di Blog

Dark Mode adalah skema warna terang-gelap, juga disebut mode hitam, mode gelap, tema gelap atau mode malam, adalah skema warna yang menggunakan teks berwarna terang, ikon, dan elemen antarmuka pengguna grafis pada latar belakang gelap dan sering dibahas dalam istilah desain antarmuka pengguna komputer dan desain web atau situs.

Dark Mode bisa juga di aplikasikan dalam aplikasi untuk kenyamanan dalam membaca. Dark Mode dalam bahasa English adalah Light-on-dark color scheme atau skema warna terang dan gelap. Dari segi penampilan, black is the new white. Dari semboyan tersebut, kamu pun mengetahui bahwa dark mode lebih dipilih orang dari segi estetikanya.

 Jika ingin melakukan design ini pada blog sobat silahkan ikuti langkah dibawah ini dengan seksama.

Cara Menambah Fitur Dark Mode Di Blog

1. Masuk ke Dashboard Blog sobat, sebelah kanan klik Tema atau Theme.

2. Pada panah bawah disamping "sesuaikan", pilih Backup atau Cadangkan. (lebih baik untuk menghindari kesalahan nantinya agar dapat kembali seperti semua).

3. Pada panah bawah disamping "sesuaikan" lagi, pilih Edit HTML. lalu

4. Cari code ]]></b:skin> pada template. Untuk mempecepat pencarian Tekan Ctrl+F agar terbuka kotak pencarian dan tinggal tempel atau paste

5. Copy Code tepat dibawah ini yang dimail dari < style > sampai < /style > Untuk [viablogers.blogspot.com] bisa diganti dengan nama blog kamu

<style>
/* DARK MODE [viablogers.blogspot.com]*/
.switch {position:relative;display:inline-block;width:60px;height:20px}
.switch input {display:none;}
.slider {position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer;background-color:#bdc3c7;-webkit-transition:.4s;transition:.4s}
.slider:before {position:absolute;content:"";height:20px;width:20px;background-color:white;-webkit-transition:.4s;transition:.4s}
input:checked + .slider {background-color:#000}
input:focus + .slider {box-shadow: 0 0 1px #2196F3}
input:checked + .slider:before {-webkit-transform: translateX(40px);-ms-transform: translateX(40px);transform: translateX(40px)}
.slider.round {border-radius:20px}
.slider.round:before {border-radius:50%}
.Night
{background-color:#000!important}
.Night #wrapper,
.Night #post-wrapper article
{background-color:#1d2129!important}
.Night #header .title,
.Night #header .title a,
.Night #header .description,
.Night #post-wrapper article
 {color:#E0E0E0!important}
</style>

6. Pastekan tepat dibawah code ]]></b:skin>  lalu

7. Cari pula code </body> Untuk mempecepat pencarian Tekan Ctrl+F  agar terbuka kotak pencarian dan tinggal tempel atau paste

8. Copy code dibawah ini. yang dimalai dari < script > sampai < /script >

<script>//<![CDATA[
$("#Night").click(function(){
$("body").toggleClass('Night');
});
//]]></script>

9. Pastekan tepat diatas code </body> 

10. Save atau simpan templatemu.

Sekarang saatnya, setelah disimpan. Kembali ke Dashboard blog sobat.

11. Pada Dashboard pilih Tata Letak/Layout, tambah widget dan CopyPaste code dibawah ini.

<label class='switch' for='Night'>
<input id='Night' type='checkbox'/>
<div class='slider round'/></label>

12. Save atau simpan dan lihat blog anda.

Dark Mode ada dimana anda meletakkan widget tadi. Selamat ya!!. Blog anda sudah memiliki fitur Dark Mode yang elegan dan menawan katanya begitu hehehe....

Manfaat Dark Mode atau mode gelap

Kita bisa merasakan berada di ruangan tempat yang lampunya dimatikan dan layar putih dari hp ini sangat dapat membutakan. Bukan hanya mata kering dan nyeri yang kita dapatkan dari melihat layar biru cerah sepanjang hari. Paparan cahaya ini juga menekan sekresi melatonin , hormon yang dibutuhkan untuk tidur. Itu juga alasan mengapa sekarang berwarna biru - untuk membuat kita tetap terjaga dan waspada.

Sebagian besar dari kita menggunakan perangkat seluler sepanjang hari dan bahkan sampai larut malam ya kan ? ya kan ?.

Tidak heran mengapa banyak dari kita menghadapi mata yang terasa - kering atau gatal, dan terkadang disertai insomnia, sakit kepala, atau sakit leher. Dan yang lebih buruk lagi, kadar melatonin yang lebih rendah telah dikaitkan dengan peningkatan risiko obesitas dan beberapa jenis penyakit lainnya.

Mode Gelap ini dapat menghemat daya baterai baik itu baterai laptop, handphone. mode gelap dapat memperpanjang masa pakai baterai ponsel cerdas.

belakangan ini juga ada kabar baik bagi pengguna iPhone. Apple telah berjanji untuk menghentikan semua layar LCD pada tahun 2020 dan menghadirkan semua perangkat generasi masa depan dengan layar OLED. ini sih kabarnya ya kalau bertanya pasti dan jelasnya belum tahu secara pasti.

Warna item dalam sebuah antarmuka juga dapat sepenuhnya mengubah cara kita berinteraksi dengan konten. Ada beberapa penelitian yang mengeksplorasi korelasi antara retensi pengguna dan penggunaan mode gelap, yang menjadikannya peluang menarik bagi pengembang aplikasi.

Mata menjadi kurang lelah di malam hari, jadi pada dasarnya Anda bisa mengonsumsi konten untuk waktu yang lebih lama. Jika Anda seperti saya, yang suka membaca sebelum tidur, maka memiliki mode gelap sangat memudahkan mata Anda.

Namun, tidak semua tentang latar belakang gelap itu bagus. Misalnya, saat Anda menggunakan perangkat di ruangan yang cukup terang atau di bawah sinar matahari langsung, teks yang ditempatkan di latar belakang gelap mungkin sulit untuk dibaca.

Jadi satu-satunya alasan untuk tidak menerapkan mode gelap adalah saat Anda yakin aplikasi Anda secara eksklusif digunakan selama siang hari yang cerah, tetapi ini agak luar biasa.

Inilah mengapa peralihan otomatis dari matahari terbenam hingga matahari terbit adalah fitur yang harus dimiliki. Pengguna bahkan tidak perlu terus berpindah beberapa kali sehari, yang merupakan kegunaan yang benar-benar hebat.

Nah, itulah cara menambah fitur Dark Mode di blog, semoga sobat tetap semangat dalam menjalankan aktivitas blogging berikutnya.

Bagikan Artikel ini

ARTIKEL TERKAIT