Membuat tampilan dark mode pada website merupakan salah satu fitur yang dapat membuat tampilan menjadi terlihat gelap seperti website twitter, youtube, dan sebagainya
Kelebihan fitur ini dapat membuat nyaman para pengunjung website anda. Karena menerapkan tampilan dark tetapi tetap membuat nyaman pengunjungnya saat berkunjung di website anda pada saat malam hari dan membuat mata pengunjung blog anda tidak sakit karena cahaya yang terlalu terang.
Fitur ini memiliki tombol switch, jadi misalkan pengunjung blog tidak menyukai tampilan gelap dapat kembali ketampilan default, atau sebaliknya.
Baiklah tidak perlu berlama-lama lagi berikut tutorial membuat tampilan night mode di Website blog
1. Buka blogger > Template > Edit HTML
2. Copy dan Paste kode CSS berikut di dalam tag ]]></b:skin>
.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:#cccccc}
.Night .post-title {color:#cccccc}
.Night ul.nav-social {color:#1d2129}
.Night .post-snippet {color:#cccccc}
3. Copy kode di bawah ini dan letakkan di atas tag </body>
<script>//<![CDATA[
$("#Night").click(function(){
$("body").toggleClass('Night');
});
//]]></script>
4. Dan terakhir copy kode berikut terserha anda ingin diletakkan dimaan, kode dibawah digunakan untuk pengunjung mengganti tampilannya ke mode night
<li>
<br/>
<label class='switch' for='Night'>
<input id='Night' type='checkbox'/>
<div class='slider round'/>
</label>
</li>
5. Done
Catatan
Jika ingin mengubah warna widget lainnya anda hanya perlu menambahkan nama widgetnya, dan jika ingin mengatur warna widget blog lainnya anda hanya perlu mengatur kode warna CSSnya saja
Contohnya
.Night #wrapper {background:#1d2129;}
Keterangan
Warna merah bisa diganti dengan ID atau Class dari widget yang ingin diubah warna backgroundnya
Sekian tutorial membuat mode night pada blog website anda.
Cara ini terbilang mudah dan tidak memberatkan speed dari blog, karena cara yang saya gunakan untuk membuat tampilan malam pada blog tidak menggunakan cookies.Jadi saat pengunjung membuka halaman lain ataupun mereload blog tampilan akan kembali seperti semula.
Terima kasih telah berkunjung
https://www.kenscripts.me/2019/04/Membuat-mode-gelap-pada-blog.html
