Hallo sahabat Alekpedia, kali ini saya akan berbagi sebuah Tutorial bagaimana membuat fitur dark mode pada blogger kita. Dimana fitur ini dibuat untuk menambah kenyamanan pembaca yang sedang membaca di blog kita.

Fitur Dark Mode sendiri adalah sebuah fitur yang berfungsi mengubah warna tampilan sebuah blog menjadi gelap. Sehingga jika pembaca sedang membaca dimalam hari, tidak terlalu membahayakan mata sih pembaca.

Karena efek pencahayaan yang terlalu terang dimalam hari, akan membahayakan kesehatan mata sih pembaca. Dengan fitur dark mode ini pengunjung blog akan lebih mudah menggunakannya karena terdapat fitur switch on dan off.

Dan fitur dark mode yang saya bagikan kali ini hanya berlaku untuk pengguna blogger, dan tidak berlaku untuk pengguna WordPress. Dan fitur ini dapat kamu terapkan pada template Viomagz.

Berikut ini bebera langkah, untuk menambahkan fitur dark mode pada blog kita:

  1. Buka Dasboard Blogger
  2. Pilih tema>> Edit With HTML
  3. Masukan kode berikut, diatas
]]></b:skin> atau </style>
/* Alekpedia.com Night Mode */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 20px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #bdc3c7;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #1d2129;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(40px);
-ms-transform: translateX(40px);
transform: translateX(40px);
}
/* Rounded sliders */
.slider.round {
border-radius: 20px;
}
.slider.round:before {
border-radius: 50%;
}
.Night #wrapper {background:#1d2129;}
.Night #HTML3 {background:#1d2129;}
.Night #footer-widget-container {background:#1d2129;}
.Night .share-this-pleaseeeee {background:#1d2129;}
.Night #label-info-th {background:#1d2129;}
.Night body {background:#1d2129;}
.Night .post-body {color:#cccccc}
.Night #baca-juga h2 {color:#cccccc;background:#1d2129}
.Night .label-info-th a {color:#cccccc;background:#1d2129}
.Night li.recent-posts a{color:#cccccc}
.Night .recent-posts-title h2{color:#cccccc}
.Night .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_title a{color:#cccccc}
.Night span.mastamvan_title a .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan {color:#cccccc;background:#1d2129}
.Night .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan .widget-content {color:#cccccc;background:#1d2129}
.Night .post-info {color:#cccccc}
.Night {background:#1d2129;}
.Night h2.post-title a {color:#1e90ff}
.Night .post-title {color:#1e90ff}
.Night ul.nav-social {color:#1d2129}
.Night .post-snippet {color:#cccccc}

Selanjutnya tambahkan kode dibawah ini, dan letakan diatas kode

</body>
<script>//<![CDATA[
$("#Night").click(function(){
$("body").toggleClass('Night');
});
//]]></script>

Dan Terakhir letakan kode berikut ini disembarang tempat yang ingin kamu letakan pada bagian navigasi:

<li><br/><label class='switch' for='Night'>
<input id='Night' type='checkbox'/>
<div class='slider round'/></label></li>

Nah itulah cara mudah menambahkan fitur Dark Mode pada blogger kita, dan silakan dicoba ya. Semoga Berhasil.