Skip to main content
Ivhaa Design

follow us

Cara Membuat Night Mode di Blogger Dengan CSS dan JQuery

Cara Membuat Night Mode di Blogger Dengan CSS dan JQuery

Baca juga:


Assalamualaikum, alhamdulillah bisa update lagi di blog ini, kali ini saya akan memberikan tutorial lagi buat kalian semua yaitu dengan membuat night mode. Sebenarnya tutorial ini sudah saya cari dari dulu akhirnya coba cari di google ketemu juga yang work.

Ku kira membuat night mudah ya jika sudah mengerti tentang CSS, HTML dan Javascript. Nsh dari pada basa basi langsung aja ke TKP ikut langkah berikut ini.

Cara Membuat Night Mode di Blogger Dengan CSS dan JQuery

Pastikan kode ini sudah ada di template kalian jika belum silahkan pasang dulu di blog kalian taruh di  atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
Jika kode berikut ini sudah ada lebih baik lewati aja karena akan membuat error kode yang lain jika di tambah 2x.

Selanjutnya kalian buat tombol dari kode HTML ini. Silahkan taruh aja sesuka hati kalian dimanapun itu.
<button class="tombol-nightmode">Night Mode</button>
Setelah itu fungsi night mode nya dengan kode JQuery, taruh kode di bawah ini tepat di atas </body>
<script>
//<![CDATA[ 
$(document).ready(function(){
    $("button.tombol-nightmode").click(function(){
        $("body").toggleClass('nightmode');
    });
});
//]]>
</script>
Selanjutnya tinggal menaruh kode CSS ini untuk langkah terakhir, taruh kode berikut ini di atas </head>
<style>
/* CSS Night Mode ketika tombol di Klik */
.nightmode {
    background:black;
    color:#fff;
}
/* CSS Tambahan untuk Elemen lain */
.nightmode div {

}
</style>
Jika ingin ditanya di komentar aja ya, selamat mencoba.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar