Cara Membuat Night Mode css di Blogger

Assalamualaikum.
Hariini saya akan kongsikan cara membuat night mode button di blogger dengan css style yang cukup senang.

Apa fungsinya nightmod?
Semakin banyak pengguna smartphone yang mengalami masalah dengan ketegangan mata karena jumlah waktu mereka dihabiskan di depan Smart Phone

Nightmode berfungsi mengurangkan kesakitan padah mata anda.

Cara memasangnya:
Login ke blogger anda dan tab Theme > Edit Html dan Tambahkan code di bawah ke dalam  css style anda

/* Nightmode */
body.night
{
 background:#00151f;
 transition: 0.5s;
}


.nightmode
{
 position: absolute;
 background: transparant;
 border:2px solid #fff;
    top: 14px;
 height: 18px;
 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;

}

Selanjutnya , Tambahkan code berikut di atas code </body>

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

Selanjutnya tambahkan code di bawah ke wiget anda untuk menampilkan button nightmode

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

Setelah selesai mengedit ,Simpan template anda dan lihat hasilnya.
Sekiranya anda kurang fahamm, sila tinggalkan comment ataupun hubungi saya melalui contact page.

Sekian saja posting saya hariini, jika diberi kesempatan kita berjumpa lagi di posting seterusnya..
wasalam..

Thanks,
O4U Admin