Kang Rian [ on Blogger! ]

rian nurherdian, kang rian, blog kang rian, blog rian nurherdian, blogger hacks , free blogger templates, blogspot tutorial, blogger tutorial, tutorial seo, tutorial html5, blog seo friendly, modifikasi template blog, desain web pemula, blogger basic

Basic Pembuatan Night Mode dengan CSS dan jQuery

Basic Pembuatan Night Mode dengan CSS dan jQuery - night mode widgetAssallamu'alaikum wr wb.

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>


Coba-coba? Klik Disini

Jika ada yang ingin ditanyakan silahkan berkomentar! selamat mencoba dan semoga bermanfaat. :)
-- Enjoy!
Suka artikel ini? Bagikan!

Hidden Ads!

 
Mohon Aktifkan Javascript!Enable JavaScript