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.

Tutorial Blogger dan Widget Blogger
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!

COMMENTS

Name

Aceh,23,Adsense,8,BBM,3,Biography,1,Bitcoin,4,Blog,21,Blogger,12,Blogging,55,Business,14,Cerita,3,CPNS,1,Delicious,1,Design,1,DeviantART,1,Digg,1,Dollar,3,Dunia,13,Facebook,5,Flickr,1,Friendster,1,Gambar,2,Game,34,Gmail,1,Google+,4,Hosting,1,Inspirasi,2,Instagram,1,Internet,13,Interview,11,Kesehatan,2,LinkedIn,1,Makalah,7,Marketing,12,Meme,8,Money,3,Motivasi,2,MySpace,1,Outlook,1,Path,1,Pendidikan,10,Pengetahuan,4,Pinterest,1,Plugin,5,PNS,1,Reddit,1,Review,4,Seo,53,Smartphone,5,Social Media,38,Sukses,3,Sumatera Barat,16,Sumatera Utara,3,Templates,1,Tips,6,Toko Online,3,Top10,18,Tumblr,1,Tutorial,29,Tutorial Blog,146,Twitter,3,Umum,9,Vimeo,1,VK,1,Weebly,1,WhatsApp,1,Widget,55,Wisata,4,WordPress,14,Yahoo,1,Youtube,3,
ltr
item
Mas Da Bang: Basic Pembuatan Night Mode dengan CSS dan jQuery
Basic Pembuatan Night Mode dengan CSS dan jQuery
https://4.bp.blogspot.com/-hvnsdIn2B0g/WkplWIk1gUI/AAAAAAAANhA/-9qX8st7FKUhSrl6hV9N3RaXW5KiDrxXwCLcBGAs/s1600/Tutorial-Blogger.png
https://4.bp.blogspot.com/-hvnsdIn2B0g/WkplWIk1gUI/AAAAAAAANhA/-9qX8st7FKUhSrl6hV9N3RaXW5KiDrxXwCLcBGAs/s72-c/Tutorial-Blogger.png
Mas Da Bang
https://blog.itapuih.com/2018/11/basic-pembuatan-night-mode-dengan-css.html
https://blog.itapuih.com/
https://blog.itapuih.com/
https://blog.itapuih.com/2018/11/basic-pembuatan-night-mode-dengan-css.html
true
2732475762120586724
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy