Basic Pembuatan Night Mode dengan CSS dan jQuery

Alhamdulillah, saya masih diberi kesempatan untuk berbagi lagi di blog ini! first thanks to allah, setelah hampir beberapa bulan saya KUDET ...

Alhamdulillah, saya masih diberi kesempatan untuk berbagi lagi di blog ini! first thanks to allah, setelah hampir beberapa bulan saya KUDET ( Kurang Update ) kali ini saya akan membahas seputar Cara Pembuatan Night Mode seperti di Blog saya ini. Karena permintaan dari beberapa pengunjung blog ini.

Sebetulnya sangat mudah membuat fungsi night mode ini bagi sobat yang sudah belajar HTML, CSS, dan jQuery! fungsi jQuery yang sangat berperan dalam Widget Night mode ini adalah jQuery .click dan jQuery .toggleClass, baiklah tanpa basa-basi lagi, berikut adalah tutorial / langkah-langkahnya :

Cara Membuat Widget Night Mode ala Kang Rian!

Pastikan sobat sudah menyimpan kode external jQuery library di bawah ini, tepat sebelum tag </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

Kode jQuery library hanya bisa di pasang 1x saja, jika sobat sudah memasang kode jQuery library lewati langkah ini, karena akan mengakibatkan konflik / semua kode jQuery tidak akan berfungsi.

Langkah-1 (HTML) : Membuat tombol untuk mengaktifkan effect night mode.

<button class="tombol-nightmode">Night Mode</button>

Langkah-2 (jQuery) : Mengaktifkan fungsi night mode dengan jQuery! simpan kode di bawah ini sebelum tag </body>



[<script>//<![CDATA[
$(document).ready(function(){ $("button.tombol-nightmode").click(function(){ $("body").toggleClass('nightmode'); });});//]]></script>]

Langkah-3 (CSS) : Setting CSS Night Mode sesuai dengan TAG HTML pada Template Blog/Website sobat! simpan kode di bawah ini sebelum tag </head>



[<style>/* CSS Night Mode ketika tombol di Klik */.nightmode { background:black; color:#fff;}/* CSS Tambahan untuk Elemen lain */.nightmode div {}</style>]

Jika ada yang ingin ditanyakan silahkan berkomentar! selamat mencoba dan semoga bermanfaat. :)
-- Enjoy!