Cara Lengkap Membuat Efek Night Mode Pada Blog 2019

Your Ads Here

Assallamu'alaikum wr wb.

Alhamdulillah, saya masih diberi kesempatan untuk berbagi lagi di blog ini! first thanks to allah, kali ini saya akan membahas seputar Cara Pembuatan Night Mode Pada Blog.

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 Efek Night Mode Pada Blog

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>

Note : Jika Ingin Artikel Ini Tinggal Klik Button Download Yang Telah Disediakan.

Terima Kasih Telah Berkunjung.

#SemogaBermanfaat
#SalamNewbieBlogger

Your Ads Here

Your Ads Here

Your Ads Here

Your Ads Here