Cara Membuat Night Mode css di Blogger - Onet4u Tech
Dark
News Update
Loading...

Cara Membuat Night Mode css di Blogger

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
Cara Membuat Night Mode css di Blogger

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
dottycat
“Don’t try to plan everything out to the very last detail. I’m a big believer in just getting it out there: create a minimal viable product or website, launch it, and get feedback.”

RELATED POSTS

COMMENT

Load Comments

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel