Sedikit Info Seputar
Basic Pembuatan Night Mode dengan CSS dan jQuery
Terbaru 2017
- Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Basic Pembuatan Night Mode dengan CSS dan jQuery, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang
Artikel Basic,
Artikel CSS,
Artikel jQuery,
Artikel Widget, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul:
Berbagi Info Seputar
Basic Pembuatan Night Mode dengan CSS dan jQuery
Terbaru
link: Basic Pembuatan Night Mode dengan CSS dan jQuery
Berbagi Basic Pembuatan Night Mode dengan CSS dan jQuery Terbaru dan Terlengkap 2017
Assallamu'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>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!