Cara Membuat Menu Night Mode Di Blogger dengan CSS dan JQuery

Assalamualaikum, Kali ini saya akan bincangkan tentang Cara Membuat Menu Night Mode Di Blogger dengan CSS dan JQuery.

 Cara Membuat Mod Malam Pada Paparan Blogger anda. Bagi anda yang ingin membuat
satu Menu menjadi mode malam seperti yang anda lihat di blog O4U, Silakan baca tuorialnya.

Cara Membuat Menu Night Mode Di Blogger dengan CSS dan JQuery :

Login ke blogger  > Theme > HTML Editor dan cari code berikut </head> dan Pasangkan code berikut di atas code </head> anda.

<script>
//<![CDATA[ 
$(document).ready(function(){
 $('.nightmode').click(function(){
  $('.nightmode').toggleClass('active')
  $('body').toggleClass('night');
});
});
//]]>
</script>

Seterusnya masukan css code berikut di dalam css style template blogger anda

/* CSS Night */
body.night{color:#fff;background:#00151f;transition:0.5s}
.nightmode{position:absolute;background:transparant;border:2px solid #fff;top:14px;right:105px;height:15px;width:30px;cursor:pointer;border-radius:20px;transition:0.5s}
.nightmode.active{background:#00151f;border:2px solid #fff}
.nightmode:before{content:'';position:absolute;top:2px;left:2px;width:11px;height:11px;background:#fff;border-radius:50%;transition:0.5s}
.nightmode.active:before{left:17px;background:#fff}
.night .divcssanda{/* masuakan code css anda di sini untuk mengubah tampilan mod malam*/}

Bagai mana membuat css blog night mod?

Caranya cukup senang buat css code contoh saya membuat widget label untuk mod malam code cssnya akan kelihatan seperti ini :

 .night #Label{background-color:#888; color:#fff} .night label h2{background-color:#444; color:#fff}

Anda boleh menambahkan css code bllog anda yang anda ingin tampilkan mod malam.

Seterusnya pasangkan code berikut untuk butang on/off mod malam. Anda boleh letakanya di mana sahaja , sesuai kemahuan anda.

<div class='nightmode' title='Mode Malam'>
</div>

Setelah selesai sailakan lihat hasilnya.

Untuk demonya anda boleh lihat di dalam blog O4U ini.

Sekiranya ada pertanyaan tentang cara membuat mod malam di blogger , silakan tinggalkan coment anda ataupun hubungi saya dengan contact form. Baiklah sampai di sini sajalah posting saya tentang Cara Membuat Menu Night Mode Di Blogger dengan CSS dan JQuery.