cara membuat fitur mode malam di blogger mudah

Fitur dark mode di blog akan membuat tampilan blog kamu menjadi keren dan nyaman untuk dikunjungi siapapun apalagi template blog yang digunakan sudah mendukung responsive, yang berarti semua perangkat dapat melakukan load dengan lancar dan cepat. Script fitur night mode ini sudah dilengkapi dengan adanya penambahan Cookie-Set, artinya ketika pengunjung mengunjungi halaman ulang maka tampilan night mode tidak akan berubah.

Akan ada opsional untuk mengembalikan tampilan halaman blog dari mode gelap ke mode terang tanpa perlu melakukan perubahan apapun di script ini. Jadi, bagi kamu yang tidak bisa ngoding tidak perlu berkecil hati sebab semua script yang sudah disediakan bisa langsung dipakai. Namun, jika ingin melakukan editing pada barisan kode itu lebih bagus.

manfaat fitur mode malam di blogger

Dark Mode merupakan salah satu fitur yang wajib dimiliki dengan tujuan untuk memanjakan pengunjung dengan tampilan yang tidak terlalu terang bagi penglihatan mata. Dengan tampilan gelap pengunjung akan betah berlama-lama sembari membaca artikel tanpa adanya keluhan silau.

Cara Membuat dan Memasang Night Mode di Blogger

1. Masuk ke halaman blogger

2. Pilih Themes / tema

3. Pilih edit HTML

4. Kalian klik Ctrl+F untuk memunculkan kotak pencarian kemudian kalian cari kode ]]></b:skin>

5. Kalian pastekan kode CSS dibawah ini

 body
{
margin: 0;
padding: 0;
font-family: sans-serif;
transition: 0.5s;
}
body.night
{
background: #00151f;
}
.toggle
{
position: absolute;
top: 40px;
right: 50px;
background: #fff;
border: 2px solid #00151f;
width: 45px;
height: 20px;
cursor: pointer;
border-radius: 20px;
transition: 0.5s;
}
.toggle.active
{
background: #00151f;
border: 2px solid #fff;
}
.toggle:before
{
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: #00151f;
border-radius: 50%;
transition: 0.5s;
}
.toggle.active:before
{
left: 27px;
background: #fff;
}
.content
{
margin: 100px auto;
width: 1000px;
}
.content h1
{
margin: 0 0 20px;
padding: 0;
color: #000;
transition: 0.5s;
}
.content p
{
margin: 0;
padding: 0;
color: #000;
transition: 0.5s;
font-size: 18px;
}
body.night .content h1,
body.night .content p
{
color: #fff;
}  

6. Kemudian pastekan kode javascript dibawah ini tepat di atas kode </body>

7. kemudian kalian bisa taruh kode html dibawah ini ditempat yang kalian inginkan

 
--

7.Kalian bisa taruh kode di atas di antara kode dibawah

 
...
...
 

Sekian cara membuat fitur mode malam di blogger mudah dari saya semoga bermanfaat buat kalian para blogger dan terimakasih sudah menyempatkan diri untuk mampir ke website ini jangan lupa kunjungi halaman lainnya. Thanks.

Bagikan Artikel ini