Cara Membuat Night Mode atau Mode Malam di Blogger | With CSS Style

Hallo sob kali ini saya akan share tutorial Membuat Nightmode atau Mode Malam di Blogger, nah pasti sobat pernah liat blog Arlina atau orang lain yang blognya ada tombol mode malamnya. Nah disitulah sobat agak tertarik ya kan? untuk cara membuatnya.


Dalam Nightmode yang saya buat ini yang berubah menjadi malam hanya bodynya (sisi kanan & kiri) hanya tampilan di desktop saja. Tapi sobat bisa kok otak-atik aja kalo sobat ingin di mobile semuanya jadi malam.

Nightmode ini saya buat istimewa beda dengan yang lain, saya membuatnya menggunakan CSS Style untuk tombolnya dan JavaScript untuk functionnya. bedanya menggunakan CSS Style ini tampilannya responsive ketika tombol ditekan, tombol akan bergerak dengan efek.

Jika sobat penasaran tertarik membuatnya, simak tahap-tahap berikut.

Cara Membuat Mode Malam di Blogger

  • Pertama sobat masuk ke blogger
  • Setelah masuk dashboard Tema > Edit HTML
  • Salin CSS Style dibawah, lalu tempel CSS Style tersebut tepat diatas kode </style> atau ]]></b:skin> 
/* Nightmode by Anonimcyber */
body.night
{
 background:#00151f;
 transition: 0.5s;
}

.nightmode
{
 position: absolute;
 background: transparant;
 border:2px solid #00151f;
 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:#00151f;
 border-radius:50%;
 transition: 0.5s;
}

.nightmode.active:before
{
 left:17px;
 background:#fff;

}
  • Lalu masukkan juga JavaScript dibawah ini, letakan tepat diatas kode </body>
$(document).ready(function(){
 $('.nightmode').click(function(){
  $('.nightmode').toggleClass('active')
  $('body').toggleClass('night')
 })
})
  • Simpan Template

Cara Memasang Tombolnya

  • Buat Widget baru, Tata letak > Tambah Gadget > HTML/JavaScript
  • Tempelkan script pemanggil dibawah ini
<div class="nightmode" title="Mode Malam">
</div>
  • Simpan, selesai
  • Sobat juga bisa tambahkan dimana saja terserah sobat.

Mungkin cukup sekian, Semoga Tutorial Cara Membuat Night Mode atau Mode Malam di Blogger | With CSS Style bisa bermanfaat dan selamat mencoba ya sob.

Berlangganan update artikel terbaru via email:

1 Komentar "Cara Membuat Night Mode atau Mode Malam di Blogger | With CSS Style"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

SafelinkU | Shorten your link and earn money