Cara menambahkan tombol dark mode di blog, mudah kok!!

Untuk memberikan kenyamanan kepada pengunjung dalam membaca postingan blog, fitur blog dalam hal desain yang berpengaruh kuat adalah tombol dark mode atau mode gelap. Dimana fitur ini berguna untuk menguah tampilan atau tema pada blog menjadi gelap sehingga pencahayaan menjadi berkurang.

Seperti yang kita ketahui, waktu rata-rata pengguna internet mengakses dunia maya yaitu pada malam hari. Itulah sebabnya fitur dark mode atau mode gelap diperlukan untuk mengurangi beban cahaya pada mata, situs-situs lain seperti twitter, youtube pun menambahkan fitur ini karena memahami bagaimana ramainya pengguna internet mengakses pada malam hari sebelum mereka pergi tidur.

Untuk itu TutorialnyaPAS juga menggunakan fitur dark mode atau mode gelap.

penampakannya seperti dibawah ini

Cara menambahkan tombol dark mode di blog

Jika ingin menambahkan tombol on/off dark mode atau mode gelap pada blog kita, berikut langkah-langkah yang cukup mudah yang harus kita tempuh.

1. Setelah Log in pada Blogger.com, pilih ke Theme atau Tema untuk merubahnya. Namun sebelumnya backup tema terlebih dahulu.

    pilih Theme > Edit HTML 

2. Kemudian Copy kode CSS berikut, dan Paste kan tepat dibawah ]]></b:skin>

<style> /* DARK MODE [tutorialnyapas.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>

3. Kemudian Copy kode Javascript berikut, dan Paste kan di atas </body>

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

4. Jika sudah, Lalu kita Save tema yang telah kita modifikasi tadi, dan pindah ke menu Layout atau Tata Letak dan Copy kode HTML berikut

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

5. Kode HTML diatas adalah tombol untuk On/Off dark mode atau mode gelap, yang kita gunakan untuk mengganti tema normal ke mode gelap. Letakkan kode HTML dimana pun yang kita kehendaki.

   pilih Layout > Add a Gadget > HTML/Javascript > Paste kan kode HTML > Save

 

Untuk check berhasil atau tidaknya kita buka situs blog kita.

Sekian tutorial cara menambahkan tombol dark mode dari TutorialnyaPAS.

Jika fitur tidak bisa di jalankan atau tidak sesuai dengan yang diharapkan, warna tema tak berubah atau tidak semestinya. Perlu di ketahui bahwa setiap template blog memiliki struktur yang berbeda-beda sehingga pengetahuan mengenai kode CSS sangat di butuhkan agar blog kita bisa benar-benar dapat menjalankan fitur ini dengan semestinya.

Terimakasih sudah berkunjung, jika bermanfaat silahkan share dan silahkan tinggalkan komentar jika ada pertanyaan

Share Yuk