Kang Rian
4
Kang Rian
6/13/2015 11:04:00 AM
Basic Pembuatan Night Mode dengan CSS dan jQuery
Basic Pembuatan Night Mode dengan CSS dan jQuery
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>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!
Kang Rian Ikuti
Web & Graphic Designer - Berpengalaman sejak 2010, fokus membantu Perusahaan / UMKM agar dikenal secara Global melalui Website Profesional & Desain yg Menjual.
Cek. Jasa-Design.web.id
Ini dia, solusi Loading Lambat dalam Penggunaan Font Awesome / Font Icon.
Lagi-lagi tips optimasi menjadi dorongan saya untuk menulis artikel di "Blog Tetangga" yang sebelumnya " rian-nurherdian.blo...
![Merapihkan kode CSS dengan CSS Beautifier [ Tools ] - Alhamdulillah, bisa sharing lagi nih.. kali ini saya ingin berbagi tools untuk sobat yang belum sempat Merapihkan Code CSS nya, Langsung sa...](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnQIDA8jFsTVHUqUHD-4HRS8IIOzX0yhf-JSZb-k7_byuP1MbfhCkRFWaM14VdeeImHsASgzne9CRw-XlmEGGmp6DM0U7XsoJJfkcNnE3oReXSCSyxMV-Jo7_-HhwauOtnm6LFlw5KT_uV/w800-h400-p-k-no-nu/css-beautifier-icon-png-KangRian%5Bdot%5Dcom.png){kind=icon}
Merapihkan kode CSS dengan CSS Beautifier [ Tools ]
Alhamdulillah, bisa sharing lagi nih.. kali ini saya ingin berbagi tools untuk sobat yang belum sempat Merapihkan Code CSS nya, Langsung sa...
Cara Membuat Widget Live Sales (Statis) seperti SEOTemplate.web.id
Alhamdulillah Pada kesempatan ini saya Kang Rian admin Jasa-Design.web.id ingin berbagi sedikit ilmu tentang " Cara Membuat Widget Li...
keren mas, baru liat nih kekreativan kek gini.. hebat
BalasHapusiya mas, iseng2 berhadiah nih :D
Hapusmantap kang, ntar saya coba ah... :)
BalasHapussilahkan bro eka .. semoga berhasil! :)
Hapusjquery abis kayaknya akang yang satu ini :genit
BalasHapusabis di gimanain mba? :D
Hapuskang rian...
BalasHapussaya bisa request gak ?
bikin widget show hide yg kayak notif di blog rian-nurherdian.blogspot.com dulu ...?
dan sama bikin full page kayak tampilan rian-nurherdian.blogspot.com sekarang. kalau misal kita mau bkin di halaman statis gmn yah?
saya udah coba bikin tapi gagal mulu ... :D
nanti saya buatkan layout nya ya.. wait for next time brother :D
Hapusdi tunggu layout ny kang :2thumbup
Hapusklo yg notif show hide udah jadi kemrn bikin sndiri kang :cool ..
wah, ini perlu diterapkan di blog, agar pembaca nyaman liat blog malam hari
BalasHapusTY Gan Berhasil :2thumbup
BalasHapusGan Tolong ajarin Dong cara buat TOMBOL Back to Top Nya Bagus Tuh Jadi Naksir Ane :thumbup
Kang Aziz dah gk ada Blog nya :berduka
Hapusbaru sempat mampir kang, selama menjalankan ibadah puasa buat sobat2 kang rian
BalasHapusiye sob, thanks udah mampir.. semangat yee puasanya! kalo ngebuburit dimari aja.. ada tutorial manis semanis kolak pisang :D
HapusGan Sori ane nanya2
BalasHapusbutton class="tombol-nightmode">Night Mode button
kode diatas taronya di mana yk ?
mohon di jawab gan ane newbie
wiihh, ternyata caranya gitu kang, ngga terlalu rumit. heheh.
BalasHapusmantap mantap kang, diantos postingan kreatif lainnya :cendol :cendol
Terima kasih infonya :)
BalasHapushttp://clayton88.blogspot.com | http://goo.gl/Ie7IEb | http://goo.gl/eQV9d3 | http://bit.ly/1sUU8dl | http://goo.gl/CI4bLf | http://goo.gl/lNMX3D | http://bit.ly/1NM7v7j | http://goo.gl/cAQcMp | http://goo.gl/97Yn1s | http://goo.gl/tw2ZtP
Kumpulan Berita Menarik
Berita Menarik
Artikel Aneh Unik
Berita Lucu
Artikel Misteri Dunia
Blog Dofollow
Tips Menarik
www.Babapoker.com
Agen Poker
Agen Poker Online
Agen DominoQQ
Agen Capsa
www.Master138.net
Bandar Bola
Situs Bola
Agen Tangkas
Agen Bola
Agen Casino Online
Bandar Casino Online Terpercaya
www.BapakPoker.com
Agen Poker
Agen Poker Online
Agen Poker Terpercaya
www.Axioobet.com
Agen Casino
Agen Bola
Bandar Casino
Bandar Bola
Situs Taruhan Bola
www.Ingatpoker.com
Agen Poker
Agen Poker Terpercaya
Agen Poker Online
Makasih kang Rian tutorialnya.. Pas banget nih buat blog yang sering dikunjungin via mobile :2thumbup
BalasHapusMakasih Kang Kunjung Balik : http://myinggrisku.blogspot.co.id/
BalasHapusSiapp sob!! :D
Hapus:sup2
BalasHapus