Bagaimana cara membuat atau memasang Dark Mode di blog? Nah, pada artikel ini Admin ingin membahas bagaimana cara memasang dark mode di blog.
Dalam tutorial memasang dark mode ini khusus buat pengguna template viomagz. bagaimana dengan template lain? coba saja, semoga work.
Baca juga: Cara Membuat Efek Turun Salju di Blog
Jika tertarik untuk membuat night mode diblog, silahkan ikuti tutorial dibawah.
Cara Memasang Tombol Dark Mode di Blog
Pertama-tama kalian harus membuka Blogger > Tema > Edit HTML, lalu copy kode dibawah ini tepat diatas kode ]]></b:skin>.
/* Night Mode infinityxsamz.com */
.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}
Sekarang tambahkan kode dibawah ini sebelum kode </body>.
<script>//<![CDATA[
$("#Night").click(function(){
$("body").toggleClass('Night');
});
//]]></script>Jika sudah, tambahkan kode tombol dark mode dibawah ini dimana saja sesuai keinginan Anda.
<li><br/><label class='switch' for='Night'>
<input id='Night' type='checkbox'/>
<div class='slider round'/>
</label></li>Jika sudah, klik Simpan template dan lihat hasil nya.
Mudah bukan cara membuat tampilan dark mode di blog? Sekarang blog Anda bisa menggunakan fitur night mode pada tampilan blog Anda.
Baca juga: Cara Membuat Efek Preloading Keren di Blog
Nah, seperti itulah cara membuat tombol dark mode di blog. Jika Anda suka dengan artikel ini, Anda bisa memfollow fanpage kita di Facebook (Infinity Xsamz).
Penutup
Terima kasih telah membaca artikel Cara Memasang Tombol Mode Gelap di Blog, Semoga bermanfaat untuk kalian semua.