Cara membuat fitur dark mode pada blog

Sahabat FARONESIA dimanapun kalian berada, dark mode atau mode malam adalah salah satu fitur yang tersusun dari beberapa kode yang difungsikan dapat mengubah tampilan menjadi gelap seperti contoh blog saya ini, kalian bisa mengaktifkan dark mode dengan menekan button di menubar.

Pada fitur dark mode ini dilengkapi tombol switch on dan off. Keunggukan dari mode gelap ini adalah mata para pembaca menjadi tidak sakit saat membaca artike blog yang dipasangi fitur ini dan juga tidak menyilaukan mata. Selain itu, penampilan blog menjadi lebih keren saat menggunakan mode ini.

Sebenarnya fitur ini sudah lama sekali dikenal didunia blogger, namun banyak versi dari fitur dark mode tersebut, nah disini admin AZZAINFO akan membagikan fitur dark mode yang simpel namun keren dan juga ditambah cara-cara penerapan yang sudah tertata rapi agar kamu semua mudah memahaminya.

Pada kesempatan ini admin sebelumnya telah mencobanya dan mengkreasikan penerapannya pada template viom*gz (template yang sekarang admin pakai). Agar tidak memakan waktu lama, langsung saja kita mulai tutorialnya:

• Buka blogger
• Dashboard > tema > edit html
• Paste kode dibawah ini tepat diatas kode ]]></b:skin>

/* faronesia.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}

• Tambahkan kode dibawah ini tepat diatas kode </body>

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

• Kemudian tambahkan kode dibawah ini sesuai keinginan kalian, kalau admin menambahkan kode di susunan kode menu navigasi

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

• Selesai dan save.

Untuk DEMOnya kalian bisa lihat diblog yang kalian baca sekarang ini.

Mudah bukan? Fitur dark mode ini tidak menggunakan cookies jadi setiap kalian memuat halaman baru akan kembali terang dan kamu harus menekan tombol untuk mengaktifkan fitur ini kembali.

Demikianlah artikel cara membuat fitur dark mode pada blog semoga bermanfaat. Jika masih kurang faham atau ingin memberikan saran dan kritikan silahkan komentar dibawah ini ya.

Share this post