Cara membuat Night Mode dengan CSS dan jQuery

Cara membuat Night Mode dengan CSS dan jQuery

Bertemu lagi dengan saya Harun Faruqi atau Haday, Kali ini saya akan membahas tentang tutorial membuat Night Mode dengan CSS dan jQuery, sebelum ke tutoarialnya kita lihat Demonya saja dulu supaya tidak penasaran.

MEHADAY

Klik pada bagian Night Mode

Bila kamu ingin membuat seperti tersebut ikuti tutorial berikut ini :

1. Login Blogger, Klik Template → Edit HTML.

2. Pastikan sobat sudah menyimpan kode external jQuery library di bawah ini, tepat sebelum tag </head> . Untuk mempermudah silahkan tekan CTRL + F jika sudah ketemu maka paste kan 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 kamu sudah memasang kode jQuery library lewati langkah ini, karena akan mengakibatkan konflik / semua kode jQuery tidak akan berfungsi.

3. Membuat tombol untuk mengaktifkan effect night mode, kamu bisa menaruh nya sesuai dengan ke inginan kamu seperti contoh di Menu atau yang lainnya.

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

4. Mengaktifkan fungsi night mode dengan jQuery! simpan kode di bawah ini sebelum tag </body>

5.  Setting CSS Night Mode sesuai dengan TAG HTML pada Template Blog/Website kamu! simpan kode di bawah ini sebelum tag </head> atau juga bisa di tepatkan sebelum tag </body> atau juga seblum tag ]]></b:skin> kalau untuk di ]]></b:skin> hapus kode yang berwarna merah, kalau untuk saya menaruh nya di </head> .

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

Sekian yang dapat saya sampaikan semoga artikel ini dapat bermanfaat bagi kamu, Bila kamu ingin bertanya silahkan berkomentar di kolam komentar.